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

Posted 2023-03-05

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

【英文标题】：Vertical border of <thead> in different color than rest of <table> border - bleeds into horizontal border below - Firefox colspan issue

【发布时间】：2012-10-20 09:37:48

【问题描述】：

我有一个<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>

【问题讨论】：

我可能会补充一点，Chrome/Safari 解决方案对我来说效果不佳，因为我想更改悬停时的边框颜色，如果原始边框是双倍的，这是不可能的。相反，我尝试了其他变体，如插图等，但它们在不同的浏览器中看起来不同。似乎唯一可能的解决方案是使用 TH 背景图像作为边框，但问题是在 Firefox 和 IE 中必须放置在 TH 的右侧，但在 Chrome/Safari/Opera 中位于左侧，与下面的 TD 的实际边界对齐。不过我不想使用浏览器黑客。

【参考方案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>

【讨论】：

谢谢，但这看起来就像我的例子一样——红色的垂直边框“渗入”了 colspan 上方的绿色水平边框。我想要的是 colspan 的顶部水平边框从左到右全是绿色，thead 的垂直红色边框正好在 th 的两侧（因为它们在我的示例中没有 colspan）。