<thead> 的垂直边框与 <table> 边框的其余部分颜色不同 - 渗入下方的水平边框 - Firefox colspan 问题

Question

我有一个<table>，我希望<thead>/<th> 中的垂直边框与其余边框的颜色不同（所有边框都是 1 像素宽，表格顶部没有边框）。这看起来很简单——问题是在 Firefox、Safari 和 Chrome 中，这些垂直边框“渗入”下方的水平边框，看起来不太好。在 Firefox 中，如果<thead> 下方的行包含与<thead> 相同数量的列/单元格，它看起来没问题，但如果我使用<colspan>，我会得到“出血”。

显而易见的解决方案是在垂直<th> 边框上使用“solid”，在下面的水平<td> 边框上使用“double” - 这确实适用于 Safari 和 Chrome。但是，我还没有为 Firefox 想出一个解决方案，我想我已经尝试了一切。我无法删除边框折叠，因为这是其他目的所需要的。 （是的，默认情况下它看起来像我想要的 IE8 和 Opera！）

查看示例：http://jsfiddle.net/7YdCQ/

代码（一个非常简单的例子，带有强烈的颜色）- CSS（所有边框都是实心的）：

table { border-collapse: collapse; }
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; }
tbody th, td { border: 1px solid #0F0; }

HTML（2 个表格，1 个带有 colspan）：

<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>

Answer 1

解决方案是正确覆盖 CSS 样式。在<th> 的<thead> 和<tbody> 标签中使用colspan 进行了测试。编辑示例：http://jsfiddle.net/7YdCQ/21/

CSS

table { border-collapse: collapse; }
tbody th, tbody td { border: 1px solid #0F0; }
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; }

HTML

<table>
    <thead>
        <tr>
            <th>Thead TH 1</th>
            <td colspan='2'>Thead TD colspan 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan='3'>Tbody TH colspan 3</th>
        </tr>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>
<br>
<table>
    <thead>
        <tr>
            <th>Thead TD 1</th>
            <th>Thead TD 2</th>
            <th>Thead TD 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
            <td>Tbody TD</td>
        </tr>
    </tbody>
</table>