html table表头不变滚动表体

table 需要出现纵向滚动条时,大多数情况会在table外面包一层div 设置css属性  overflow:auto 来实现table出现滚动条但这样做有个问题,滑动表格是移动整体 表头也会被移动。

解决办法有如下

1、 设置table  表头和表体

关键css

.table{
            width: 100%;
            border-collapse:collapse; 
            border-spacing:0; 
        }
        .fixedThead{
            display: block;
            width: 100%;
        }
        .scrollTbody{
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }
        .table td,.table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            padding: 2px 3px 3px 4px
        }


// html代码

<table class="table">
        <thead class="fixedThead">
            <th>header</th><th>header two</th>
        </thead>
        <tbody class="scrollTbody">
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
            <tr><td>fuck 1</td><td>fuck 2</td></tr>
   
        </tbody>
    </table>

// 3个Table 主、表头、表体


<table width="100%" align="center" border=0>
       <tr>
       <table  width="100%"  border=1>
       <tr>
              <td width="20%">
                     biaoti1321
              </td>
              <td width="20%">
                     biaoti2321321
              </td>
			   <td width="20%">
                     biaoti2321321
              </td>
			  <td width="20%">
                     biaoti2321321
              </td>
			  <td width="20%">
                     biaoti2321321
              </td>
           
       </tr>
       </table>
       </tr>
   <tr>
   <td align="center" width="100%">
    <div  style="overflow-y:auto; width:100%;height:100px">
    <table width="100%" border=1>
       <tr>
              <td>111</td>
              <td>111</td>
			   <td>111</td>
       <td>111</td>
			   <td>111</td>
       </tr>
              <tr>
              <td>111</td>
              <td>111</td>
			   <td>111</td>
             <td>111</td>
			   <td>111</td>
       </tr>                
   </table>

存在一个问题 如果表头个数为奇数时  不好设置td宽度百分比 



  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在 Bootstrap 中,可以使用固定表头滚动表体的插件来实现这个效果。以下是实现步骤: 1. 引入必要的文件: ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 2. 创建一个表格,并在表格头部添加 `thead` 标签: ``` <table class="table table-bordered table-striped"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> ``` 3. 使用 JavaScript 初始化表格,并调用插件: ``` $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); ``` 其中,`fixedHeaderTable` 是插件名称,`fixedColumn: true` 表示需要固定表头。 4. 根据需要调整样式: ``` .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } ``` 其中,`.table-fixed-header` 是插件自动生成的类名,可以根据需要进行修改。 完整代码如下: ``` <!DOCTYPE html> <html> <head> <title>Bootstrap Table 表头固定表体滚动</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-striped table-fixed-header"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> </div> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fixed-header-table@1.3.2/dist/fixed-header-table.min.js"></script> <script> $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值