如何制作大型表格响应

我的表格在桌面上显示效果很好，但是一旦我尝试查看移动版本，我的表格最终会变得太宽而无法显示移动设备屏幕。我正在使用响应式布局。如何设置此表在移动显示精细这是我的代码如何制作大型表格响应

<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

如何制作大型表格响应

回答

相关问题