0
我想在移動設備上顯示響應表。問題是包含無線電的最右邊的列太靠近屏幕的邊緣。因此，我增加了一個保證金權利。但是，當我在移動設備上打開頁面時，邊距消失。添加一個空列會使表格變得奇怪。有沒有其他方法可以爲移動設備上的響應表提供保證金？我只是不想讓最右邊的列太靠近邊緣。我設置的邊距在移動設備上消失
<meta name="viewport" content="width=device-width, initial-scale=1">
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
CSS：
@media only screen and (max-width: 600px) {
.table-responsive{
margin-right: 5rem !important;
}
}
HTML：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>中國工程院無線投票系統</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/vote.css">
</head>
<body ng-app="vote" ng-controller="vote_ctrl" ng-init="init()" ng-show="is_start">
<h2 class="sub-header">
<span ng-bind="voteData.department"></span>第<span ng-bind="voteData.round"></span>輪
<span ng-bind="voteData.group"></span><span ng-bind="voteData.vote_type"></span>第
<span ng-bind="voteData.times"></span>次
</h2>
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">提名書號</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年齡</th>
<th rowspan="2">學科專業</th>
<th rowspan="2">工作單位</th>
<th colspan="3" ng-if="voteData.ballot_type =='記分'">圈選欄</th>
<th colspan="2" ng-if="voteData.ballot_type =='表決'">圈選欄</th>
</tr>
<tr>
<th ng-if="voteData.ballot_type =='記分'">A</th>
<th ng-if="voteData.ballot_type =='記分'">B</th>
<th ng-if="voteData.ballot_type =='記分'">C</th>
<th ng-if="voteData.ballot_type =='表決'"><i class="glyphicon glyphicon-ok"></i></th>
<th ng-if="voteData.ballot_type =='表決'"><i class="glyphicon glyphicon-remove"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in voteData.candidates">
<td>{{item.candidate_num}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.major}}</td>
<td>{{item.company}}</td>
<td ng-if="voteData.ballot_type =='記分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
</td>
<td ng-if="voteData.ballot_type =='記分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
</td>
<td ng-if="voteData.ballot_type =='記分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表決'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表決'">
<input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
</td>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-success btn-lg center-block">提交</button>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/vote.js"></script>
</body>
</html>
這工作得很好，而不只@media ...在桌面上，但它並沒有在移動設備上運行。
我們需要更多的代碼。請提供一個工作片段。 –
html文件只包含一個頭文件和一個表格。我只是忽略了表 –
@XINDILI的細節和CSS？我們需要能夠重現您的問題... – Shiva127