用于固定标题和列的引导表方法示例

之前用bootstrap写了一个报表，最近突然找到我说，看能不能把表头和表单的第一列搞定，方便查看数据。于是，我开始努力学习。毕竟我是后端。对于前端风格的问题，尤其是小功能，我会在这里记录我的研究成果。

1.js和css的介绍

！-引入jquery-脚本类型=' text/JavaScript ' src=' http :/js/jquery-3 . 3 . 1 . min . js '/脚本！-介绍bootstrap-link rel='样式表' href='的js和css文件。/CSS/bootstrap . min . CSS ' rel=' external no follow '脚本src=' http3360。/js/bootstrap . min . js '/脚本！-修复标题链接rel=“样式表”类型=“文本/CSS”href=“所需的js和CSS(引导表)。/CSS/bootstrap-table . min . CSS ' rel=' externalnofallow '脚本src=' http3360。/js/bootstrap-固定列所需的js和CSS(bootstrap-table-fixed-columns)-Link rel='样式表' type=' text/CSS' href='。/CSS/bootstrap-table-fixed-columns . CSS ' rel=' external no follow '脚本src='http:/js/Bootstrap-table-fixed-columns . js '/script query下载地址：https://www.jb51.net/zt/jquerydown.htmbootstrap下载地址：http://www.bootcss.com/Bootstrap-table下载地址：https://bootstrap-table.com Bootstrap-table-fixed-columns下载地址：https://github.com/wenzhixin/bootstrap-table-fixed-columns

请注意：

引入jquery时，2.0.0版以下(含2.0.0版)不要引入jquery。如果在2.0.0版以下引入jquery，在您完成代码编写后，控制台中将出现以下错误：

二：写表表(固定表头)

Table class=' table-bordered ' id=' table ' data-toggle=' table ' data-height=' 200 '在上述代码的table标记中，data-toggle=' table '表示启动了引导表因为我这里写的表数据比较少，显示的数据可能没有滑轮，看不到固定表头的现象。您可以向表中添加更多的数据

三.固定柱

Script$(function(){ //#table表示id $ ('# table ')。引导表(“销毁”)。上表中的bootstrap表({固定列： true，固定数： 1//固定列数})；})/脚本4:浏览器窗口变化时，表头和表不对齐：

script$(function(){$('#table '))。bootstrapTable()；$(窗口)。resize(function () { $('#table '))。bootstrapTable(' resetView ')；});})/脚本5:第一次展示时表头和表体数据不对齐的解决方案(个人使用的方法有点傻)

经过上面的过程，我们已经实现了表的表和列固定功能，所以我开始修改报表，一开始非常容易，没有问题。但是，当我修改报告时，我发现开头的标题和数据不一致：

于是我开始在网上搜索，但是网上搜索的答案根本解决不了，比如：

找到引导表的源代码

if(this . options . show header this . options . height){ this。$ TableHeader . show()；//注释掉下面两行，取消表头初始化，解决表头与内容错位的问题。//this . resetheader()；//填充=这个。$ header . outhealth()；}不知道写这个的兄弟有没有亲自测试过。反正我注释完之后，表头和数据是对齐的，但是表头的固定功能消失了。标头和数据之间未对齐的原因是因为您设置了固定的标头。你这样去掉了表头的固定功能，我用不了多久就直接去掉了table标签中的data-height='200 '。为什么要修改源代码？

所以我开始自己研究

最后，我使用review元素找到了错位的标题位置，并找到了这样一段代码

div class=' fht-cell ' style=' width : 146 px；'/div这里，宽度设置为146，但是我的数据宽度只有120，这就造成了错位。

然后我找到了引导表源代码将div的类设置为fht单元宽度的代码位置

虽然我发现了问题，但是源代码哪里出了问题，我还是不知道，有知道的伙伴，请告诉我答案

由于不知道源代码哪里出错了，我用了一个非常愚蠢的方法，直接把类设置为fht-cell的宽度，覆盖了之前的146的宽度。fht-cell{width:120px！重要；}然后打开观看，错误的问题就解决了！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。