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

Question

我有一个<table>,我想在垂直边界<thead>/ <th>是一个不同的颜色比边界的其余部分(所有边界为1个像素宽,在桌子上没有边框).这看起来很简单 - 问题是在Firefox,Safari和Chrome中,这些垂直边框会"渗入"下面的水平边框,这看起来不太好看.在Firefox中,如果下面的行<thead>包含与其相同数量的列/单元格,则看起来没问题<thead>,但是如果我使用的话,<colspan>我会得到"出血".

显而易见的解决方案是在垂直<th>边框上使用"solid",在下面的水平边框上使用"double" <td>- 这确实适用于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 样式。colspan使用<th>和<thead>标签进行测试<tbody>。编辑示例： 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; }

超文本标记语言

<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>