bootstrapTable固定头固定列之后的对齐问题

首先有条件的话,换吧!!!

下面组件指的是bootstrapTable

1、固定列之后出现行不对齐,行越多越明显

主要原因是因为固定的列行高和内容行高不一样,这里举个例子: 固定列加粗了字体, 内容没有加粗. 反之同理. 其余的自己找原因

2、固定头之后表格滚动起来,出现列不对齐

这里会说两个原因
1、误差
表头的宽度设置是获取下面第一行列的宽度设置的, 由于每列的宽度是自适应的, 所以实际宽度会出现小数, 但是jQuery获取的时候是整数, 这就会造成误差, 列越多误差就越大
2、滚动条
固定列肯定是因为表格太高固定高度滚动,于是表格内容就会出现滚动条, 滚动条也是有宽度的, 这就造成了表格滚动到最后可以多向右滚动一点, 这个宽度就是滚动条宽度

3、表头固定, 且表头为复杂表头

具体原因就不清楚了, 表头初始化时候是设置了宽度的, 表头在这种情况下会自适应, 组件控制表头的方式就是通过里面的一个没有高度只有宽度的元素撑开的, 但是外部的th自适应了,甚至比这个元素都宽, 那组件想通过它控制宽度也就自然没用了.
出现严重对不齐的时候就是屏幕比较宽的时候, 如果屏幕够窄, 表格需要横向滚动, 那对不齐的现象就没那么严重.
这种情况的解决方案就是给table加上一个css属性

table {
	table-layout: fixed;
}

这个应该熟悉了, 网上常搜出来的就是这个了
这里加的table是所有table, 组件生成table的时候会有好几个table, 要一起加上去
加这个属性之后会发现表格对齐了, 但是也不能左右滚动了, 至于表头内容显示 … 这个就是css的属性, 自己设置吧

总结

第二种情况没有给出方案, 主要是得修改源码, 而且治标不治本
2.1 修改源码获取宽度的方式, 换成精确值就行了, 自行百度. 即使改完了也不是100%对齐的, 不知道为啥. 但是比之前好点
2.2 去掉滚动条就行了, 不要想着要滚动条还得不占宽度, 除非自己实现一个滚动条. 不会有人去做吧
3 自己取舍吧, 没有完美的

还是那句话, 可以的话换吧, 都什么年代了还用它