Bootstrap中的响应式表格效果

最新推荐文章于 2023-12-18 23:41:14 发布

「已注销」

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量764

点赞数

分类专栏：前端文章标签： Bootstrap

原文链接：https://www.mk2048.com/blog/blog.php?id=j221jakaa&title=Bootstrap%E4%B8%AD%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E8%A1%A8%E6%A0%BC%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

                        
                    响应式表格 
  
 
 
 
  通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。 
 
 
   
  <!DOCTYPE html>  
<html>  
<head>  
   <title>Bootstrap 实例 - 响应式表格</title>  
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
   <script src="/scripts/jquery.min.js"></script>  
   <script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="table-responsive">  
   <table class="table">  
      <caption>响应式表格布局</caption>  
      <thead>  
         <tr>  
            <th>产品</th>  
            <th>付款日期</th>  
            <th>状态</th>  
         </tr>  
      </thead>  
      <tbody>  
         <tr>  
            <td>产品1</td>  
            <td>23/11/2013</td>  
            <td>待发货</td>  
         </tr>  
         <tr>  
            <td>产品2</td>  
            <td>10/11/2013</td>  
            <td>发货中</td>  
         </tr>  
         <tr>  
            <td>产品3</td>  
            <td>20/10/2013</td>  
            <td>待确认</td>  
         </tr>  
         <tr>  
            <td>产品4</td>  
            <td>20/10/2013</td>  
            <td>已退货</td>  
         </tr>  
      </tbody>  
   </table>  
</div>        
  
</body>  
</html>   
 
 
 
  
 
 

   结果如下所示： 
 