在css中为table 添加border-collapse:collapse后表格单元格边界异常的解决办法

时间:2021-08-01 06:52:20

在css中添加border-collapse:collapse或在js中添加borderCollapse = "collapse"能够消除单元格间的间距,但是,如果用js对table进行操作完后,table需要重新计算列宽时,个别单元格的边界会很不听话,仍然维持原来的宽度,这时删除表格的border-collapse:collapse就能恢复正常,但单元格间会产生间距。尤其在使用<colgroup>标记来动态显示/隐藏列时,ff一加载就有问题,ie在对colgroup操作以后也会有问。这个问题很烦。

现在想到的唯一的解决办法是在html中添加cellpadding="0" cellspacing="0"属性,这个似乎和css,js中的 border-collapse不一样,但也能去除单元格间距,而且不会产生边界问题。

但会产生另一个问题:如果单元格中没有内容,单元格不显示边框,网上搜了一下,最后找到一个兼容ff和ie7/8 的方法:

在表格的css中加empty-cells:show;这个ff支持,ie不支持。然后再用js判断一下浏览器,如果是ie就$("table").rules="cols"; rules:cols属性虽然ff也支持,但会产生上面说过的问题即单元格边框错位。