html - 为 HTML 表格行添加边框，

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

Answer 1

您可以在 tr 元素上设置 border 属性，但根据 CSS 2.1 规范，此类属性在分离边框模型中无效，这往往是浏览器中的默认值。引用:17.6.1 The separated borders model . (border-collapse的初始值根据CSS 2.1是separate的，部分浏览器也将其设置为默认值 用于 table。总的来说，除非您明确指定 collapse，否则您在几乎所有浏览器上都会得到分离的边框。)

因此，您需要使用折叠边框。示例:

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