table固定表头

最新推荐文章于 2024-04-19 20:39:07 发布

bluelotos893

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量3k

点赞数 2

分类专栏： CSS JavaScript 前端开发

本文链接：https://blog.csdn.net/bluelotos893/article/details/88955194

版权

JavaScript 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

28 篇文章 0 订阅

订阅专栏

前端开发

25 篇文章 0 订阅

订阅专栏

table内容很多的时候需要固定表头以获取更好的浏览体验，这就需要另外制作一个内容一样的表头来掩人耳目，但是由于是两个不同的表格，随着真实表格内容的变化，真实表格表头的宽度也会随之变化，而赝品的表格则不会变化，分分钟就露馅了。

解决思路：

保持两个表格的宽度一致
保持表头的th或者tr宽度一致
保持两个表格的边框、padding样式一致
赝品的表格定位在顶部不跟随滚动
表格数据变化时宽度会改变，表头宽度在重新计算前可能会错位，可给表格的父盒子加一个透明度过渡

<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
   <style>
       .thead-tr-clone {
           background: burlywood;
       }
   </style>
   <title>测试..</title>
</head>

<body>
   <button class="btn default-btn">测试</button>
   <div style="position: relative;">
       <table class="table clone-table" style="margin-bottom: 0;position: absolute;">
           <thead>
               <tr class="thead-tr-clone">
                   <th>#</th>
                   <th>Column heading</th>
                   <th>Column heading</th>
                   <th>Column heading</th>
               </tr>
           </thead>
       </table>
       <div class="bs-example" data-example-id="contextual-table" style="max-height: 200px;overflow: auto;">
           <table class="table tag-table">
               <thead>
                   <tr class="thead-tr">
                       <th>#</th>
                       <th>Column heading</th>
                       <th>Column heading</th>
                       <th>Column heading</th>
                   </tr>
               </thead>
               <tbody>
                   <tr class="active">
                       <th scope="row">1</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr>
                       <th scope="row">2</th>
                       <td>Column content Column content Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr class="success">
                       <th scope="row">3</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr>
                       <th scope="row">4</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr class="info">
                       <th scope="row">5</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr>
                       <th scope="row">6</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr class="warning">
                       <th scope="row">7</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr>
                       <th scope="row">8</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
                   <tr class="danger">
                       <th scope="row">9</th>
                       <td>Column content</td>
                       <td>Column content</td>
                       <td>Column content</td>
                   </tr>
               </tbody>
           </table>
       </div>
   </div>
   <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
   <script>
       $(".btn").click(function () {
           console.log("button3")
           $(".clone-table").width($(".tag-table").outerWidth())//防止有滚动条时宽度变化
           $(".thead-tr-clone th").each(function (i, v) {
               $(this).css("width", $(".thead-tr th").eq(i).outerWidth())
           })
           $(".thead-tr-clone th").each(function (i, v) {
               console.log($(this).width(), $(".thead-tr th").eq(i).width())
           })

       })
       $(".btn").click()
   </script>
</body>

</html>

遇到换页时出现大量空白的情况，将tbody里只放置一个tr一个td，里面再用div貌似就解决了，遇到问题时只能逐一尝试。遇到换页时重叠的情况，一是给外面打印的容器宽度进行调整，二是对page的一些属性进行设置，暂时解决了问题。
@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

@page 规则可以通过CSS对象模型接口 CSSPageRule 访问.
size
指定页面盒模型所在的容器的大小和方向。一般情况下，因为一个页面盒模型被渲染到一面纸张上，所以这个属性也指示了目标纸张的大小

@page {
  size: A4;
  margin-top: 0;
  margin-bottom: 1cm;
  margin-left: 0;
  margin-right: 0;
}
@page { size: portrait; }/* 纵向*/
@page { size: landscape; }/* 横向*/
html,body{height:99%}
:root,html:last-child,body:last-child{page-break-after:auto}/* 有可能可以减少不必要的空白页*/

CSS选择器参考

bluelotos893

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
table固定表头

table内容很多的时候需要固定表头以获取更好的浏览体验，这就需要另外制作一个内容一样的表头来掩人耳目，但是由于是两个不同的表格，随着真实表格内容的变化，真实表格表头的宽度也会随之变化，而赝品的表格则不会变化，分分钟就露馅了。解决思路：保持两个表格的宽度一致保持表头的th或者tr宽度一致保持两个表格的边框、padding样式一致赝品的表格定位在顶部不跟随滚动表格数据变化时宽度会改变...
复制链接

扫一扫