html - Firefox 中缺少表格边框

标签 html css html-table

我有一个包含数据的表格,当我在 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>

最佳答案

Border-Collapse:Collapse - 尽可能将边框折叠成一个边框(边框间距和空单元格属性将被忽略)

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

此链接可能有助于您了解 border-collapse:collapse 和 seperate 及其工作原理。

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

关于html - Firefox 中缺少表格边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9812127/

相关文章:

html - 正确使用@media?

html - 表格单元格中的文本应仅在悬停时换行,否则应以省略号结尾

javascript - 如何在 IE8 中使用 XPath 访问 HTML 元素?

javascript - 向下滚动时 Jumptron 背景图像消失

jquery - android chrome 上用于响应式图库的奇怪线条(Flexslider、bootstrap.js)

css - 在列表项中添加超链接

javascript - 如何使用 JQuery 根据条件将表移动到 DIV 容器的顶部?

javascript - 使用 css 设置后获取 Canvas 像素数据是错误的

html - 在 HTML 表格中单独编辑 TD 的宽度

html - 如何设置表格的宽度而不影响其每列的宽度?