在表格行<tr>中添加border-bottom

我有一个由3 3表。我需要一种方法来添加每行tr底部的边框，并给它一个特定的颜色。

首先我尝试了直接的方法，即：

 <tr style="border-bottom:1pt solid black;"> 

但是这没有用。 所以我像这样添加了CSS：

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

这仍然没有工作。

我宁愿使用CSS，因为那样我就不需要为每一行添加一个style属性。 我没有向<table>添加border属性。 我希望这不会影响我的CSS。

Answer 1

我之前有过这样的问题。 我不认为tr可以直接采用边框样式。 我的解决方法是在行中设置td的样式：

 <tr class="border_bottom"> 

CSS：

 tr.border_bottom td { border-bottom:1pt solid black; } 

Answer 2

添加border-collapse:collapse到您的表格规则：

 table { border-collapse: collapse; } 

链接

Answer 3

使用border-collapse:collapse桌面和border-bottom: 1pt solid black; 在tr

Answer 4

使用

border-collapse:collapse纳森写道border-collapse:collapse ，你需要设置

td { border-bottom: 1px solid #000; }

Answer 5

这里有很多不完整的答案。 由于您不能将边框应用于tr标签，因此您需要将其应用于td或th标签，如下所示：

 td { border-bottom: 1pt solid black; } 

这样做会在每个td之间留下一个小空间，如果您希望边框看起来像是tr标签，则这可能不是您想要的。 为了“填补空白”可以这么说，你需要利用table元素的border-collapse属性，并设置它的值来collapse ，如下所示：

 table { border-collapse: collapse; } 

Answer 6

将该行显示为一个块。

 tr { display: block; border-bottom: 1px solid #000; } 

并简单地显示替代颜色：

 tr.oddrow { display: block; border-bottom: 1px solid #F00; } 

Answer 7

使用

 table{border-collapse:collapse} tr{border-top:thin solid} 

将“thin solid”replace为CSS属性。

Answer 8

我发现使用这种方法时，TD元素之间的空间造成了在边界形成的空白，但没有恐惧…

其中一个方法是：

 <tr> <td> Example of normal table data </td> <td class="end" colspan="/* total number of columns in entire table*/"> /* insert nothing in here */ </td> </tr> 

随着CSS：

 td.end{ border:2px solid black; } 

Answer 9

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

你也可以对整行进行同样的操作。

有border-bottom-style ， border-top-style ， border-left-style ， border-right-style 。 或者只是适用于所有四个边界的边框border-style 。

你可以在这里看到（并尝试在线）更多细节

Answer 10

这工作在Firefox和IE 11我：

 <td style='border-bottom:1pt solid black'> 

Answer 11

我刚刚在tr行中有边界工作。 你们都错过了STYLE这个词：

 tr style="border-bottom:1pt solid green;" 

Answer 12

HTML

 <tr class="bottom-border"> </tr> 

CSS

 tr.bottom-border { border-bottom: 1px solid #222; }