给HTML表格行加上边框<tr>

是否可以<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

您可以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>

绝对！只需使用

<tr style="outline: thin solid">

您喜欢在哪排上。这是一个小提琴。

当然，正如人们提到的那样，您可以通过id或class或其他方式（如果需要）来执行此操作。

是。我更新了我的答案演示

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>则可以使用一门课：Second DEMO

利用CSS类：

tr.border{
    outline: thin solid;
}

并像这样使用它：

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

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

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

左单元格：

style="border-style:solid;border-width: 1px 0px 1px 1px;"

中间单元：

style="border-style:solid;border-width: 1px 0px 1px 0px;"

右单元格：

style="border-style:solid;border-width: 1px 1px 1px 0px;"

添加边框间距：0rem 0.5rem; 在其底部为每个单元格（td，th）项创建一个空间，同时在单元格之间不留空间

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

经过很长一段时间的抗争，我得出了一个非常简单的答案，就是用空的单元格填充表格，以将表格的每一行填充到相同数量的单元格中（显然要考虑colspan）。使用计算机生成的HTML，这很容易安排，并且避免了使用复杂的解决方法的麻烦。插图如下：

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>