DataTable设置水平滚动条后，表头和行不对齐且出现空白解决方式

最新推荐文章于 2023-08-28 15:47:30 发布

mobile18600007978

最新推荐文章于 2023-08-28 15:47:30 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： java ee

本文链接：https://blog.youkuaiyun.com/mobile18611667978/article/details/105047445

java ee 专栏收录该内容

30 篇文章

订阅专栏

本文探讨了解决DataTable渲染时因数据过长导致的显示不全问题，通过修改CSS样式而非使用scrollX和autoWidth属性，成功实现了浏览器缩放比改变下表头与行的对齐。关键在于设置tbody滚动条并调整thead宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DataTable渲染表格时，表格中的数据长度太长，表格数据撑到右边后，看不到全部数据，所以想到增加一个水平滚动条解决此问题，确实增加了
“scrollX”: true,“autoWidth”:true 之后问题解决了，又引发了当浏览器的缩放比例改变以后，表头和行不对齐的问题；如图
图1.
在这里插入图片描述
原因是在table的div里多了一个div块，宽度都固定了，引起了错位问题；
后来通过在网络咨询解决的方式是：去掉scrollX和autoWidth，修改css样式：

//增加这一行* 即可
* {
        margin: 0;
        padding: 0;
    }

    /*table {*/
        /*!*设置相邻单元格的边框间的距离*!*/
        /*border-spacing: 0;*/
        /*!*表格设置合并边框模型*!*/
        /*border-collapse: collapse;*/
        /*text-align: center;*/
    /*}*/
    /*关键设置 tbody出现滚动条*/
    table tbody {
        /*display: block;*/
        /*height: 80px;*/
        /*overflow-x: scroll;*/
    }

    /*table thead,*/
    /*tbody tr {*/
        /*display: table;*/
        /*width: 100%;*/
        /*table-layout: fixed;*/
    /*}*/
    /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
   /* table thead {
        width: calc( 100% - 1em)
    }*/
    table thead th {
        background: #ccc;
    }