我想在移动设备上显示一个响应表。问题是包含收音机的最右边一列离屏幕边缘太近。因此，我为其添加了保证金权利。但是，在移动设备上打开页面时，页边距消失了。添加一个空列会使该表变得怪异。还有其他方法可以使移动设备上的响应表有余量吗？我只是不希望最右边的列太靠近边缘。
<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时，此方法可以正常工作，但在移动设备上不起作用。
最佳答案
<style>
@media only screen and (max-width: 600px) {
.table-responsive .table-striped{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
.table-responsive
{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
}
</style>
关于html - 我设置的边距在移动设备上消失了，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43245825/