bootstrap-table实现表头固定以及列固定的方法示例

Bootstrap-Table的奥秘：表头与列固定的实现方法

一、引入必要的JS和CSS文件

我们需要引入一些必要的JS和CSS文件，以便使用Bootstrap-Table及其相关插件。这些文件包括jQuery、Bootstrap的JS和CSS文件、bootstrap-table以及bootstrap-table-fixed-columns的JS和CSS文件。注意，引入jQuery时，请确保版本不低于3.3.1，以避免可能出现的兼容性问题。

三、实现列固定功能

三：固定列的完美实现

```javascript

$(function(){

$("table").bootstrapTable('destroy').bootstrapTable({

fixedColumns: true,

fixedNumber: 1 // 固定第一列

});

});

```

```javascript

$(function(){

$('table').bootstrapTable();

$(window).resize(function () {

$('table').bootstrapTable('resetView');

});

});

```

我在网上寻找解决方案，但大多数建议涉及修改Bootstrap Table的源码。我对源码进行了深入研究，并最终找到问题所在：在源码中，当表头显示且设置了高度时，表头会被强制显示，而这与固定列功能产生了冲突。简单地注释掉某些代码并不能彻底解决问题，反而会引发其他问题。

我采用了最直观的方法来解决这个问题。通过审查元素，我发现某些表头单元格的宽度设置不当。于是，我直接在CSS中修改了相关类（如fht-cell）的宽度，强制其与我期望的宽度一致。这样，表头和数据之间的不对齐问题得到了解决。虽然这个方法看起来有些“傻”，但在实践中却非常有效。