bootstrapTable 表头固定（可全局控制）列与列无缝对接

原创于 2024-04-30 16:57:58 发布 · 846 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrapTable 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在使用BootstrapTable时遇到的表头随滚动跑上去的问题，作者分享了解决方案，即自定义CSS以保持表头固定在顶部。

项目场景：

在项目上遇到bootstrapTable限制高度后，滚动条滚动后，表头跑上面去了，为解决这个问题，自己修改了一些bug；前端代码如下，主要是修改了bootstrap-table.css

实现

 <div style="width:52%; float:left;height:340px;" id="FreezingHeadDiv_Order">
        <table id="tb_order"></table>
    </div>
`
$('#tb_Model').bootstrapTable({
                toolbar: '#toolbar',
                columns: columns,
                pagination: true,
                showRefresh: true,
                striped: true,
                url: ‘',
                sidePagination: 'server',
                queryParams: function (params) {
                    return {
                        limit: params.limit,
                        offset: params.offset
                    };
                },
                shiftSelect: true,
                clickToSelect: true,
                height: 300,
                singleSelect: true,
                onPageChange: function (number, size) {
                    m_pagerow = (number - 1) * size;
                },
                rowStyle: function (row, index) {
                    var classes = [];
                    if (row.BOM_STATUS == "0") {
                        classes = ['warning'];//warning active info danger success
                    }
                    else {
                        classes = ['success'];
                    }
                    return { classes: classes[0] }
                }
            });

bootstrap-table.css：

.table-container {
    width: 100%;
    overflow: auto;
}

/*.table-container tbody tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}*/

.table-container thead tr > th {
    position: sticky;
    top: 0;
    z-index: 6;
    background-color: white;
}

.table-container tbody tr > th:first-child {
    z-index: 6;
}