Question

我想在移动设备上显示一个响应表。问题是最右边的列包含的无线电太靠近屏幕边缘。因此，我添加了一个保证金权利。但是，当我在移动设备上打开页面时，边距消失了。添加一个空列会使表格变得怪异。有没有其他方法可以为移动设备上的响应表提供保证金？我只是不希望最右边的列太靠近边缘。

<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的情况下工作正常...在桌面上但它不适用于移动设备。

Answer 1

现在可能对你有用！..

＆＃13;

@media only screen and (max-width: 500px) {
    .table-bordered{
        margin-left:20px !important;
    }
}

＆＃13;

<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>

＆＃13;

Answer 2

  <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>

我设置的保证金在移动设备

2 个答案: