给定以下 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。
最佳答案
这将使它在 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 hack 将其恢复到您自己的代码中仅适用于 IE6 的状态。
关于html - 在 Firefox 和 border-collapse : collapse; 中不存在单元格的表上隐藏边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/595253/