有一个响应式表格，我想在移动设备上显示。问题是包含无线电的最右侧列太靠近屏幕边缘。因此，我为其添加了边距右边距。但是，当我在移动设备上打开页面时，边距消失了。添加空列会使表格变得奇怪。有没有其他方法可以为移动设备上的响应式表格提供边距？ 我只是不希望最右边的列太靠近边缘。
<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的情况下工作正常...在桌面上，但它不适用于移动设备。
现在可能对你有用..
@media only screen and (max-width: 500px) {
.table-bordered{
margin-left:20px !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</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> <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>