为 HTML 表格行添加边框，<tr>

Question

是否可以一次给表格行加上边框 <tr> 而不是给单个单元格加上边框， <td> 就像，

 <table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

这给出了给定 <tr> 周围的边框，但它需要单个单元格周围的边框。

我们可以一次给 <tr> 一个边框吗？

→ jsFiddle

原文由 Tiny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 tr 元素上设置 border 属性，但根据 CSS 2.1 规范，此类属性在分隔边框模型中无效，这往往是浏览器中的默认设置。参考：17.6.1 分离边界模型。 （根据CSS 2.1，—的 初始 值为 border-collapse separate 部分浏览器也将其设置为 table 的 默认值 除非您明确指定 collapse ，否则几乎所有浏览器都会出现分隔边框。）

因此，您需要使用折叠边框。例子：

 <style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

绝对地！只需使用

<tr style="outline: thin solid">

在你喜欢的哪一行。这是一个 小提琴。

当然，正如人们所提到的，如果您愿意，您可以通过 id、类或其他方式来完成此操作。

原文由 takendarkk 发布，翻译遵循 CC BY-SA 3.0 许可协议