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

Giving a border to an HTML table row, <tr>

提问by Tiny

Is it possible to border a table row, <tr>in one go instead of giving a border to individual cells, <td>like,

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

This gives a border around the given <tr>but it requires a border around individual cells.

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

Can we give a border to <tr>only in one go?

我们可以<tr>一次性给边界吗？

→ jsFiddle

→ jsFiddle

回答by Jukka K. Korpela

You can set borderproperties on a trelement, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initialvalue of border-collapseis separateaccording to CSS 2.1, and some browsers also set it as default valuefor table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)

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

Thus, you need to use collapsing borders. Example:

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

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

回答by takendarkk

Absolutely! Just use

绝对地！只需使用

<tr style="outline: thin solid">

on which ever row you like. Here's a fiddle.

在你喜欢的任何一排。这是一个小提琴。

Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.

当然，正如人们所提到的，如果您愿意，您可以通过 id、类或其他一些方式来做到这一点。

回答by Itay Gal

Yes. I updated my answer DEMO

是的。我更新了我的答案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;
}

If you want to style only one <tr>you can do it with a class: Second DEMO

如果你只想设计一个样式，<tr>你可以用一个类来完成：第二个演示

回答by Fanie Reynders

Make use of CSS classes:

使用 CSS 类：

tr.border{
    outline: thin solid;
}

and use it like:

并使用它：

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

回答by Juergen

Left cell:

左单元格：

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

midd cell(s):

中间单元格：

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

right cell:

右侧单元格：

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

回答by Richard Bonneau

You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.

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

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

回答by Malik

<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>

回答by David Crowe

After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:

在与这个问题斗争了很长时间后，我得出结论，非常简单的答案是用空单元格填充表格，将表格的每一行填充到相同数量的单元格（显然，考虑到 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>