如何製作大型表格響應

我的表格在桌面上顯示效果很好，但是一旦我嘗試查看移動版本，我的表格最終會變得太寬而無法顯示移動設備屏幕。我正在使用響應式佈局。如何設置此表在移動顯示精細這是我的代碼如何製作大型表格響應

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

來源

2017-10-18 fiolafafa

查看此方法https://css-tricks.com/examples/ResponsiveTables/responsive.php – izulito

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

來源

2017-10-18 17:58:25

另一種選擇可能是通過添加overflow-x：auto來啓用表的水平滾動。到父div的樣式表。

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

來源

2017-10-18 18:08:21

如何製作大型表格響應

回答

相關問題