如何使大表響應

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

我的朋友們，不要試圖打架。 也許您可以使用媒體查詢隱藏不太重要的列，顯示3而不是6