为什么 Firefox 不显示表格单元格右边框或左边框？答案

【问题标题】：Why won't Firefox display table cell border-right or border-left?为什么 Firefox 不显示表格单元格右边框或左边框？
【发布时间】：2017-05-18 21:17:37
【问题描述】：

我有一个为所有表格单元格设置边框的表格。这用于日历。当前日期的表格单元格包含一个更改该表格单元格背景颜色的 div。但是，在 Firefox 中查看时，它会覆盖（或覆盖 - 我不确定）表格右侧和底部的单元格边框。它覆盖了 Opera 中的顶部和左侧表格单元格边框。它在 Chrome 和 Safari 中运行良好。它尚未在 IE 中进行测试。如何在 Firefox 和 Opera 中显示所有边框？代码如下：

HTML：

<table class="calendar" frame="box" rules="none">
    <tr>
        <td></td>...//seven td's total
    </tr>
    <tr><td class="very_light_gray"><div class="calendar_day_wrap">Today</div></td>...</tr>
    .... // 5 or 6 table rows total
</table>

CSS：

.calendar {
    position:inherit;
    margin:auto;
    height:100%;
    width:100%;
    z-index:99999;
    border-collapse:collapse;
}

.calendar tr {
    height:20%;
    position:relative;
    z-index:2;
}

.calendar td {
    border:1px solid #ccc !important;
    width:14%;
    vertical-align: top;
    position:relative;
    z-index:2;
}

.calendar_day_wrap {
    position:relative;    
    width:100%;
    height:100%;
}

.very_light_gray {
    background-color:#F8F8F8 !important;
}

【问题讨论】：

如果我能看到改变背景颜色的代码，我的回答能力会大大提高。此外，边框折叠：折叠；应该是“崩溃”。另外，为什么你有那么多 z-index 的东西？
感谢您的回复。我修复了上面的代码，并添加了背景颜色的 css。 z-index 的东西因为各种原因而存在，但我将它更改为不同的值，删除它等等，只是为了看看它是否有效果。它没有。

标签： css firefox html-table opera css-tables

【解决方案1】：

您设置了rules="none"，它显式关闭了列和行边框。

然后你设置border-collapse:collapse，它用列/行边界折叠单元格边界。对于每个边界段，都有一个列表，其中列出了哪些边界声明优先，并且“显式关闭”在每个规范中具有最高优先级。

您想使用border-collapse: separate 或不设置rules="none"。很有可能，你也不想要frame="box"。

【讨论】：

感谢rules 和frame 的建议。我真的不需要它们。但是，我仍然看不到 Firefox 或 Opera 中的所有边框。我不想要border-collapse: separate，因为我不想要双边框。
好吧，如果您正在做折叠边框，并且想要 1px 边框，那么您的问题是理论上边框以单元格之间的边界为中心，每个单元格中为 0.5px。实际上，如果没有丑陋的抗锯齿，大多数显示器都无法做到这一点，所以我敢打赌 UA 正在将边框捕捉到像素网格。但这可以把它放在相邻单元格的空间中......使用 2px 边框有帮助吗？
很好的洞察力。 td 上的 2px 边框确实出现在 Firefox 上，但它的厚度是其他边框的一半，因此仍然不理想。另外，我不想要 2px 边框。有没有其他方法可以解决这个问题？
嗯。我想正在发生的另一件事是，您有一个元素具有 100% 的单元格内容宽度/高度，但在折叠边框模型中，单元格边框“泄漏”到单元格中。因此，您的元素与边框重叠，并且由于它的相对定位是稍后绘制的，因此在边框上。所以你想要的是让它不与边界重叠。给单元格 0.5px 或 1px 的填充有帮助吗？

【解决方案2】：

这段在 Opera 12.0 和 Firefox 中运行的代码怎么样？

.calendar {
    margin:auto;
    height:100%;
    width:100%;
    border-collapse:collapse;
    border:1px solid #ccc;}

.calendar tr {height:20%;}

.calendar tr:nth-child(1) td {
    border:1px solid #ccc;
    height:20%;}

.calendar td {
    width:14%;
    vertical-align: top;}

.calendar_day_wrap {
    width:100%;
    height:100%;}

.very_light_gray {
    background-color:#F8F8F8;}

【讨论】：