Question

给定以下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中。

Example Image

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

Answer 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中中断，请使用条件注释或css hacks将其恢复为仅在您自己的IE6代码中的状态。

Answer 2

编辑：你的第三方工具正在生成错误/无效的标记，这会给你一个非常大的浏览器兼容性/ css头痛，如果它完全可行，替换它或自己生成HTML < / p>

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

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

所以我认为你不能使用表格来实现。

css提示

margin: 10px 0;

在顶部和底部放置10px，在左侧和右侧放置0

Answer 3

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

table {
  empty-cells:hide;
}

然后，也许不是。你还可以明确关闭表格行的边框吗？

Answer 4

使用javascript是一个选项吗？你可以在单元格中注入一个不间断的空间，它应该绘制边框。

Answer 5

这个问题的解决方案确实有效。我太久后发现了这件事

问题在于tbody标签。

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

Answer 6

来自Firefox Colspan Border-COllapse Bug：

明显的解决方法是设置   DOM之前的colspan   完成装载，或至少，   在桌子结束之前   渲染。但是，这要求   我们混乱了我们干净的HTML   使用内联标签，或者有   先前的知识数量   HTML生成阶段的列。

我希望找到一个更优雅的   “非侵入式JavaScript”解决方案   未来，但在目前我   不知道一个。简单地设置   table的“display”样式为“none”和   然后重新将其重新设置为“阻止”   不要这么做。

在Firefox和边框折叠中没有单元格的表上隐藏边框：collapse;

6 个答案: