为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

Answer 1

您可以在tr元素上设置border属性，但是根据CSS 2.1规范，这些属性在分隔的边框模型中不起作用，这在浏览器中往往是默认的。 Ref .: 17.6.1 分离的边界模型 。 （根据CSS 2.1， border-collapse的初始值是separate ，有些浏览器也将它设置为table 默认值 ，无论如何，几乎所有的浏览器都会分离边界，除非你明确指定了collapse 。

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

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

Answer 2

绝对！ 只是使用

 <tr style="outline: thin solid"> 

在你喜欢哪一行上。 这是一个小提琴 。

当然，正如人们所说的，如果你愿意的话，你可以通过身份证，class级或其他方式来做到这一点。

Answer 3

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

如果你只想devise一个<tr>你可以使用类： Second DEMO

Answer 4

使用CSS类：

 tr.border{ outline: thin solid; } 

并使用它像：

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

Answer 5

左格：

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