在Firefox中没有显示边框，在表格上有border-collapse，位置：相对于tbody，或单元格上的背景颜色
考虑下面的HTML：
<html> <head> <style> TABLE.data TD.priceCell { background-color: #EEE; text-align: center; color: #000; } div.datagrid table { border-collapse: collapse; } div.datagrid table tbody { position: relative; } </style> </head> <body> <div id="contents" class="datagrid"> <table class="data" id="tableHeader"> <thead> <tr class="fixed-row"> <th>Product</th> <th class="HeaderBlueWeekDay">Price</th> <th class="HeaderBlueWeekDay">Discount</th> </tr> </thead> <tbody> <tr style="font-style: italic;"> <td>Keyboard</td> <td class="priceCell">20</td> <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td> </tr> </tbody> </table> </div> </body> </html> 请注意，最后一个单元格的内联样式具有左边框和右边框。 你（或者至less我）会希望这是可见的。 在IE中，情况就是这样。 但在Firefox（6）中，这不是。 你可以通过以下方法解决
- 删除CSS中
div.datagrid table tbody相对位置 - 将
div.datagrid table tbody更改为CSS中的div.datagrid table - 移除CSS中
table.data td.priceCell的background-color - 删除CSS中的
div.datagrid table的border-collapse
这是我们代码的简化版本; 我们也解决了它（通过select选项2）。 但是我想知道的是：
- 这是Firefox的错误吗？
- 这是在IE浏览器中的错误？
尤其是：当CSS不变时，Firefox不显示边框的原因是什么？
这看起来像一个Firefox的bug。 背景画在边界上， 你可以看到它，如果你使用半透明的背景颜色。
刚刚遇到这个问题，并来到一个CSS只解决scheme：只需添加background-clip: padding-box到你的td元素。
有关更多信息，请参阅此文章： https ： //developer.mozilla.org/en-US/docs/CSS/background-clip
只是把所有在一个地方。
当你有一个单元格的位置相对于一个表格中的边界被折叠的时候，就会产生这个问题（正如Boris指出的那样，并填充了bug https://bugzilla.mozilla.org/show_bug.cgi?id=688556 ）
如user2342963（将background-clip：padding-box添加到单元格）所示，可以使用CSS轻松解决此问题。
你可以看到这个问题（与Firefox）和修复在这里： http : //jsfiddle.net/ramiro_conductiva/XgeAS/
table {border-spacing: 0px;} td {border: 1px solid blue; background-color: yellow; padding: 5px;} td.cellRelative {position: relative;} td.cellRelativeFix {background-clip: padding-box;} table.tableSeparate {border-collapse: separate;} table.tableCollapse {border-collapse: collapse;} <table class="tableSeparate"> <tbody> <tr> <td class="cellRelative">position: relative</td> <td>position: static</td> </tr> </tbody> </table> <table class="tableCollapse"> <tbody> <tr> <td class="cellRelative">position: relative</td> <td>position: static</td> </tr> </tbody> </table> <table class="tableCollapse"> <tbody> <tr> <td class="cellRelative cellRelativeFix">position: relative</td> <td>position: static</td> </tr> </tbody> </table>
这是一个Firefox的错误，希望他们尽快修复。 但同时我可以通过设置我的td单元格来解决这个问题position: static 。 希望这会帮助别人。
td { position: static; }
另一个可能的解决scheme是纠正表标记中的colspan错误。
当使用border-collapse时，显然colspan错误会导致与隐藏边框相同的效果：collapse;
在我的表中，当只有8列时，我写了<th colspan =“9”>。
这导致错误（隐藏的右边框）中
- Chrome 51.0.2704.103 m（64位）
- Vivaldi 1.2.490.43（）（32位）
但是在右边框中呈现
- Firefox 44.0.2
- IE 11（11.420.10586.0）
- 边缘25.10586.0.0
