在 Firefox 中不存在单元格的表格上隐藏边框和边框折叠：折叠；答案

【问题标题】：Hide border on table where no cell exists in Firefox and border-collapse: collapse;在 Firefox 中不存在单元格的表格上隐藏边框和边框折叠：折叠；
【发布时间】：2010-10-10 08:43:18
【问题描述】：

鉴于以下 HTML 页面，表格顶部会出现一条水平线，其中第一行将包含第二个和第三个单元格（如果已定义）。

<html>
<head>
<Title>Test Page</Title>

<style type="text/css">
table {
    margin:10px 0 10px 0;
    padding:0;
    margin: 0 0 0 0;
    border-collapse: collapse;
    border: 0;
}

td {
    border:1px solid #CCCCCC;
    padding:5px;
}
</style>

</head>
<body>
    <table>
        <tr>
            <td>Test Title</td>
        </tr>
        <tr>
            <td>Sub Title</td>
            <td>Sub Title</td>
            <td>Sub Title</td>
        </tr>
    <table>
</body>
</html>

我希望仅通过修改 CSS 来删除该行（在下面突出显示）。此行出现在 Firefox 中，但不在 IE6 中。

请注意，我不能以任何方式修改 HTML，因为它是由第三方系统生成的（上面的示例只是为了突出问题）。这个第三方系统只允许我修改 CSS。

【问题讨论】：

标签： html css firefox

【解决方案1】：

这将使它在 Firefox 中呈现没有顶部边框：

table, td {
    border: 1px #CCC;
}

table {
    margin: 0;
    border-spacing: 0;
    border-style: none none solid solid;
}

* html table {
    border-collapse: collapse;
}

td {
    border-style: solid solid none none;
    padding: 5px;
}

对我来说，它在 IE7 中也可以正常工作。如果它在 IE6 中中断，请使用条件 cmets 或 css hack 将其恢复到您自己的 IE6 代码中的状态。

【讨论】：

【解决方案2】：

编辑：您的第三方工具正在生成错误/无效标记，这会给您带来非常大的浏览器兼容性/css 问题，如果可行，请替换它或自己生成 html

从技术上讲，第一行应该标记为

    <tr>
        <td colspan="3">Test Title</td>
    </tr>

所以我认为您无法使用表格来实现这一点。

一个 CSS 技巧

margin: 10px 0;

上下各放10px，左右各放0

【讨论】：

【解决方案3】：

empty-cells 属性在这种情况下可能会对您有所帮助。

table {
  empty-cells:hide;
}

再一次，也许不是。是否也可以显式关闭表格行的边框？

【讨论】：

【解决方案4】：

是否可以选择使用 javascript？您可以在单元格中注入一个非中断空间，它应该绘制边框。

【讨论】：

我认为问题在于如何隐藏而不是绘制边框。
别担心，这是第三方产品，我只能修改 CSS。

【解决方案5】：

这是解决这个问题的真正有效的方法。很久以后才发现的

问题出在 tbody 标签上。

在此处查看解决方案： http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table

【讨论】：

嗨，阿卜杜拉，我刚刚用问题中的示例和 Firefox 3.1 Beta 3 进行了尝试，但该行仍然可见？
你能告诉我你网站的网址吗？还有你放了什么css代码。这东西真的很管用，也许你错过了什么。

【解决方案6】：

来自Firefox Colspan Border-COllapse Bug：

显而易见的解决方法是设置 DOM 之前的 colspan 完成装载，或至少，在桌子完成之前渲染。然而，这需要我们把原本干净的 HTML 弄得乱七八糟带有内联标签，或者有先验知识 HTML 生成阶段的列。

希望能找到更优雅的 “非侵入式 JavaScript”解决方案未来，但现在我一个都不知道。只需设置表的“显示”样式为“无”和然后将其重新设置回“阻止” 不要做这个伎俩。

【讨论】：