zoukankan      html  css  js  c++  java
  • Table标题行冻结,数据行滚动的一种方式

            这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来。

            首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离。我是这么做的,用两个表格,一个只有thead,一个只有tbody,两个表格的列数量是完全相等的,而且相同的列宽度完全相等。这样两个表格合并在一起的时候,就感觉是一个表格一样。

            但问题来了,就是当滚动条的时候,滚动条会占掉一部分宽度,导致数据表的总宽变小,从而导致数据表每个单元格的宽度被不同程度挤压,这样,表头与数据的边框就无法对齐了。

            解决办法是,在外层套一个DIV,overflow用hidden,然后把数据表的宽度设置为calc(100% + 16px),这样,就把滚动条推到右边去隐藏掉,从而表格单元格也正常了。

  • 相关阅读:
    06-局部变量和全局变量
    05-python中函数的使用
    04-字典的常见操作
    04-python第四天学习
    Openstack认证过程
    03-字典的增删改查
    01-名字管理系统.py
    02-python中列表的增删改查
    01-python中字符串的常见操作
    ubuntu16.04卸载软件
  • 原文地址:https://www.cnblogs.com/lythen/p/10097832.html
Copyright © 2011-2022 走看看