为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

Answer 1

您可以border在tr元素上设置属性,但是根据CSS 2.1规范,这些属性在分离的边框模型中没有任何效果,这在浏览器中往往是默认的.参考:17.6.1 分离的边界模型.(该初始值border-collapse是separate根据CSS 2.1,以及一些浏览器也将其设置为默认值的table.反正最终的效果是你走散了几乎所有的浏览器,除非你明确specifi边界collapse.)

因此,您需要使用折叠边框.例:

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

Answer 2

绝对!只是用

<tr style="outline: thin solid">

你喜欢哪一排.这是一个小提琴.

当然,正如人们所提到的,如果你愿意,你可以通过身份证,班级或其他方式来做到这一点.

Answer 3

您可以使用 tr 元素上的 box-shadow 属性作为边框的替代。另外，同一元素上的任何 border-radius 属性也将应用于框阴影。

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Answer 4

是.我更新了答案DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

如果你想只设计一个,<tr>你可以用一个类来做:第二个演示

Answer 5

利用CSS类：

tr.border{
    outline: thin solid;
}

并像这样使用它：

<tr class="border">...</tr>