为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

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

绝对! 只是使用

 <tr style="outline: thin solid"> 

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

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

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

使用CSS类:

 tr.border{ outline: thin solid; } 

并使用它像:

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

左格:

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