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样式。在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; }

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>

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

1 个答案: