Question

我有一个包含数据的表格，当我在Firefox中查看时，一些边框没有显示。请看附件截图。

在任何其他浏览器中都不会发生这种情况。在Firefox，IE，Safari和Chrome中测试过。

任何想法为什么和热门解决它？

我使用样式来格式化表格：

.myTbl {
  border: 2px solid #cccccc;
  border-collapse: collapse;
}

.myTbl th, .myTbl td {
  white-space: nowrap;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 2px;
}

.myTbl td {
  text-align: center;
  width: 15%;
}

.myTbl tr:hover td {
  background-color: #ffffcc;
}

.myTbl thead th, .myTbl thead:hover th {
  text-align: center;
  font: normal 10px arial, verdana, sans-serif;
  background-color: #ffffff;
}

HTML：

<table class="myTbl">
<thead>
<tr>
    <th></th>
</tr>
</thead>
<tbody>
<tr>
    <td></td>
</tr>
</tbody>
</table>

Answer 1

边框折叠：折叠 - 尽可能将边框折叠为单个边框（将忽略边框间距和空单元格属性）

Border-Collapse：Seperate - 分离边框（边框间距和空单元格属性不会被忽略）。这是默认的

此链接可能有助于您了解边框折叠：折叠和分离并了解其工作原理。

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

Answer 2

我在ff中也经历过这个边界崩溃问题 - 表格中的大多数单元格显示边框但偶尔的单元格没有显示边框 - 这看起来很奇怪。我试过圣诞老人建议的解决方案，它确实有效 - 通过使用边界崩溃：分开;并将border-spacing设置为0会将分隔的边框间距减小为零，从而给出折叠边框的“外观”（换句话说，边框折叠：折叠;假设在ff中执行）。

Answer 3

对于什么值得，以下似乎解决了我的问题。我替换：

border-collapse: collapse;

使用

border-collapse: separate;
border-spacing: 0;

Firefox中缺少表格边框

3 个答案: