为 HTML 表格行 < tr > 提供边框

小开

是的。我更新了我的答案 译自: 美国《科学》杂志网站(http://jsfiddle.net/d73e7/2/”rel = “ noReferrer”> 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>，你可以用一个类: 第二个 DEMO

小开

当然，用就是了

<tr style="outline: thin solid">

你喜欢哪一排，这是小提琴。

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

小开

使用 CSS 类:

tr.border{
outline: thin solid;
}

然后像这样使用它:

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

小开

最佳答案

您可以在一个 tr元素上设置 border属性，但是根据 CSS 2.1规范，这些属性在分离的边框模型中没有任何作用，这在浏览器中往往是默认的。参考文献: 17.6.1 分离边界模型。(根据 CSS 2.1，border-collapse的 首字母缩写值是 separate，对于 table，一些浏览器也将其设置为 默认值。不管怎样，最终的结果是几乎所有浏览器的边界都是分开的，除非显式地指定 collapse。)

Thus, you need to use collapsing borders. Example:

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

小开

Left cell:

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

中间细胞:

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

right cell:

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

小开

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:

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

小开

<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 元素上的 box-shadow 属性替换边框。作为一个加号，同一个元素上的边界半径属性也将应用于盒子阴影。

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

小开

添加边界间距: 0rem 0.5 rem; 在底部为每个单元格(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;
}

小开

你可以试试这个(边框就在每一行的底部)

  table {
border-collapse: collapse;
}


tr {
border-bottom: 1px solid black;
}