当 colspan 设置在下面的 td 行时，单个 th 的边界扩展到相邻的 th答案

【问题标题】：Border of single th spreads to neighboring th when colspan set on td row below当 colspan 设置在下面的 td 行时，单个 th 的边界扩展到相邻的 th
【发布时间】：2012-09-09 00:19:58
【问题描述】：

有以下html代码：

<table>
<tr><th>First</th><th class='second'>Second</th><th class='third'>Third</th><th>Fourth</th></tr>
<tr><td>Mike</td><td colspan=2 >John</td><td>Paul</td></tr>
</table>

以及下面的css：

table {
    border-collapse: collapse;
}

td, th {
border: 1px black solid;
}

td {
    border-top: none;
}
th {
    border-bottom: none;
}
th.second {
    border-bottom: 3px green solid;
}
th.third {
}

我希望结果是一张表格，在第二个单元格下方有 3px 实心绿线。而不是在 Chrome 中，我在第二个和第三个单元格下方都有纯绿色边框。

在 Firefox 中，结果与预期的一样。这是浏览器的错误，还是我的代码不合法？

您可以在http://jsfiddle.net/tt6aP/3/查看示例

PS：尝试设置

th.third {
    border-bottom: 2px solid red;
}

然后尝试将其提高到 3px。这更奇怪了。

截图

预期：

铬：

火狐：

【问题讨论】：

我无法重现您的问题。另外，您能否改写您的问题以更清楚地说明您看到什么以及您期望看到什么？
我添加了截图
你只是在看这个吗？将您的代码放入静态 HTML 文件并加载到 Chrome 中，您是否看到相同的内容？我不。我在 Chrome 中看到正确的显示，在 Chrome 中的 fiddle 中看到不正确的显示。
@mmcglynn 你需要添加table{border-collapse: collapse;}规则
@mmcglynn 不是真的。这并不能解释 Firefox 和 chrome 中的不同行为。如果在使用 colspan 和 border-collapse 时仅设置 th 的边框是非法的，或者它只是 chrome 错误，我仍然感兴趣。

标签： css google-chrome html-table

【解决方案1】：

另一个例子：http://jsfiddle.net/huggz/LVjja/3/

我认为更容易理解。我的解决方案很简单。我不需要border-collapse: collapse 设置。将我的表更改为：

table {
    border-collapse: separate;
}

一切正常。我不得不认为这是一个错误。当 Chrome 折叠边框时，感觉就像 Chrome 只是选择了错误的边框长度来显示。它显示的是上一行的长度，而不是当前单元格的长度。

另一种解决方案是在有边框的单元格之前添加一个宽度为 0 的列，例如 http://jsfiddle.net/huggz/LVjja/6/

css:

.hack {
    width: 0;
}

html:

<tr>
    <td colspan="4">3 Cols</td>
</tr>
<tr>
    <td class="hack"></td>
    <td class="top_border">1 details</td>
    <td>2 normal</td>
    <td>3 normal</td>
</tr>

【讨论】：

【解决方案2】：

好吧，我不知道这是否是一个错误，但是当我遇到这个时问题，我想出了一个简单的解决方法：插入一个额外的行/列你想在哪里应用边框样式。

<table>
    <tr>
        <th>Ano</th>
        <th class='first'>First</th>
        <th class='second'>Second</th>
        <th class='third'>Third</th>
    </tr>
    <tr class='hack'>
        <td></td>
        <td></td>
        <td></td>
        <td></td>        
    </tr>
    <tr>
        <td>Mike</td>
        <td colspan=2 >John</td>
        <td>Paul</td>
    </tr>
</table>

这是css：

table {
    border-collapse: collapse;
}
tr.hack > td {
    height:0px;
}
td, th {
    border: 1px black solid;
}
tr.hack > td, td {
    border-top: none;
}
tr.hack > td, th {
    border-bottom: none;
}
th.first {
    border-bottom: 3px green solid;
}
th.second {
}
th.third {
}

我在 chrome 上测试了这个 over here

【讨论】：