Question

我的桌面在桌面上显示正常，但是一旦我尝试查看移动版本，我的桌子就会变得太宽，无法移动设备屏幕。我正在使用响应式布局。如何设置此表在移动设备中正常显示这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row clearfix">
    <div class="col-xs-12">
        <div class="card">
            <div class="body">
                <div class="table-responsive">
                    <table id="myTable" class="table table-bordered table-striped table-hover js-basic-example dataTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
    </div>
    </div>

Answer 1

另一种选择可能是通过添加overflow-x：auto来为表启用水平滚动;到父div的样式表。

div.table-responsive {
  overflow-x:auto;
}

Answer 2

我的朋友们，不要试图打击fisics。也许你可以使用媒体查询隐藏不太重要的列，显示3而不是6

如何使大表响应

2 个答案: