table表头冻结

sinat_35501669 2016-12-15 04:14:01

前台渲染table的时候，怎么让表头随数据进行左右滚动，在数据进行上下滚动的时候冻结表头？？？？？

...全文

694 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jinhx 2018-08-30

打赏
举报

谢谢各位，表头设置了position后，从布局看，它就已经不是表格了，手动对齐本身没问题，但是我想表格的数据部分的列宽是自动的，所以不好解决，全固定倒好解决了

winzond 2018-08-18

打赏
举报

引用 5 楼 jinhx 的回复:

没有直接的办法，目前网上看到的都是使用两个table，最要命的是要指定每列的宽度手动对齐

宽度对齐要不了几行代码就搞定了嘛

Misters_Chen 2018-08-17

打赏
举报

 

首先定义一个style

<style>

       .tabletop {

            margin-top: 20px;//这个功能是让你的表格和表头顶部对齐

        }

</style>



<body>//这个就是主体了，思路是上面表头下面表格

     <aside style="position:fixed; left:0; top:0; width:100%; height:40;">

        <table width="98%" align="center" bgcolor="#CCCCCC">

            <tr>

                 这样就是定义一条高度为四十的固定表头，注意下面你的表格里面需要class="tabletop"

            </tr>

        </table>

     </aside>



    <TABLE class="tabletop">

         你的表格，具体表格内容

    </TABLE>



</body>

不懂就私聊我

winzond 2018-08-16

打赏
举报

我研究过管家婆的表格，是使用两个表格实现的。如果使用同一个表格，你可以试试：

position:fixed;

top:30px;//固定上边距

left:5px;//固定左边距

注意：要添加背景色，否则，往下拉的时候，会显示下面行的东西，不好看。
但是，我建议你还是使用两个表格，一：管家婆这样的专业人士是使用两个表格的；二：在你设置样式、获取表格数据时，不需要考虑标题行的问题，如果使用一个表格，一些比较复杂的标题行的问题也不好处理。三：固定的位置，并不是太好确定，时时刻刻都要去获取父元素的位置，父元素变了，标题行没跟着去，就麻烦了，让它自然排列，就任何问题都没有了，标题行永远跟着父元素走，内容行永远跟着标题行走，移动滚动条时，也不会错误越过标题行。

jinhx 2018-08-16