使用bootstrap框架实现内容滚动条滚动显示表格table固定表头

àì夳堔傛蜴生んèń 2022-09-03 10:19 1237阅读 0赞

使用bootstrap框架实现内容滚动条滚动显示表格table固定表头

    • 实现效果
    • html代码

实现效果

在这里插入图片描述

html代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="js/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" />
  7.         <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
  8.         <script type="text/javascript" src="js/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js" ></script>
  9.         <style> table th,td{ width: 100px; } #testTable{ width:600px; margin:0px auto; } #testTable thead{ display:block; overflow-y: scroll; } #testTable tbody{ display:block; max-height:150px; overflow-y: scroll; } </style>
  10.         <script> $(function(){ //表格加载后,去除内容第一行的上边框 $("#testTable").find("tbody td").css("border-top","none"); }); </script>
  11.     </head>
  12.     <body>
  13.         <table id="testTable" class="table table-bordered">
  14.             <thead>
  15.                 <tr>
  16.                     <th>表头一</th>
  17.                     <th>表头二</th>
  18.                     <th>表头三</th>
  19.                     <th>表头四</th>
  20.                     <th>表头五</th>
  21.                     <th>表头六</th>
  22.                 </tr>
  23.             </thead>
  24.             <tbody>
  25.                  <tr>
  26.                     <td>qipa250一</td>
  27.                     <td>qipa250二</td>
  28.                     <td>qipa250三</td>
  29.                     <td>qipa250四</td>
  30.                     <td>qipa250五</td>
  31.                     <td>qipa250六</td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>qipa250一</td>
  35.                     <td>qipa250二</td>
  36.                     <td>qipa250三</td>
  37.                     <td>qipa250四</td>
  38.                     <td>qipa250五</td>
  39.                     <td>qipa250六</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>qipa250一</td>
  43.                     <td>qipa250二</td>
  44.                     <td>qipa250三</td>
  45.                     <td>qipa250四</td>
  46.                     <td>qipa250五</td>
  47.                     <td>qipa250六</td>
  48.                 </tr>
  49.                 <tr>
  50.                     <td>qipa250一</td>
  51.                     <td>qipa250二</td>
  52.                     <td>qipa250三</td>
  53.                     <td>qipa250四</td>
  54.                     <td>qipa250五</td>
  55.                     <td>qipa250六</td>
  56.                 </tr>
  57.                 <tr>
  58.                     <td>qipa250一</td>
  59.                     <td>qipa250二</td>
  60.                     <td>qipa250三</td>
  61.                     <td>qipa250四</td>
  62.                     <td>qipa250五</td>
  63.                     <td>qipa250六</td>
  64.                 </tr>
  65.                 <tr>
  66.                     <td>qipa250一</td>
  67.                     <td>qipa250二</td>
  68.                     <td>qipa250三</td>
  69.                     <td>qipa250四</td>
  70.                     <td>qipa250五</td>
  71.                     <td>qipa250六</td>
  72.                 </tr><tr>
  73.                     <td>qipa250一</td>
  74.                     <td>qipa250二</td>
  75.                     <td>qipa250三</td>
  76.                     <td>qipa250四</td>
  77.                     <td>qipa250五</td>
  78.                     <td>qipa250六</td>
  79.                 </tr><tr>
  80.                     <td>qipa250一</td>
  81.                     <td>qipa250二</td>
  82.                     <td>qipa250三</td>
  83.                     <td>qipa250四</td>
  84.                     <td>qipa250五</td>
  85.                     <td>qipa250六</td>
  86.                 </tr><tr>
  87.                     <td>qipa250一</td>
  88.                     <td>qipa250二</td>
  89.                     <td>qipa250三</td>
  90.                     <td>qipa250四</td>
  91.                     <td>qipa250五</td>
  92.                     <td>qipa250六</td>
  93.                 </tr><tr>
  94.                     <td>qipa250一</td>
  95.                     <td>qipa250二</td>
  96.                     <td>qipa250三</td>
  97.                     <td>qipa250四</td>
  98.                     <td>qipa250五</td>
  99.                     <td>qipa250六</td>
  100.                 </tr>
  101.             </tbody>
  102.         </table>
  103.         </div>
  104.     </div>
  105.     </body>
  106. </html>

发表评论

表情：
评论列表 （有 0 条评论，1237人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Bootstrap 滚动条

    一：添加bootstrap样式增加滚动条 其实只要在 相关模块的  class属性中，再加上  pre-scrollable 即可。 例如是在<div

    女爷i女爷i/ 0 赞/ 399 阅读