我有一个 3 x 3 的表格。我需要一种方法来为每一行的底部添加一个边框tr并给它一个特定的颜色。
首先我尝试了直接的方式，即：
<tr style="border-bottom:1pt solid black;">
但这没有用。所以我添加了这样的CSS：
tr {
border-bottom: 1pt solid black;
}
那仍然没有用。
我更喜欢使用 CSS，因为这样我就不需要style为每一行添加一个属性。我没有border向<table>. 我希望这不会影响我的 CSS。
添加border-collapse:collapse到您的表格规则：
table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>我以前遇到过这样的问题。我认为tr不能直接采用边框样式。td我的解决方法是为行中的 s设置样式：
<tr class="border_bottom">
CSS：
tr.border_bottom td {
border-bottom: 1px solid black;
}
使用border-collapse:collapse在桌子和border-bottom: 1pt solid black;tr
采用
border-collapse:collapse正如内森所写，您需要设置
td { border-bottom: 1px solid #000; }
这里有很多不完整的答案。由于您无法将边框应用于tr标签，因此您需要将其应用于tdorth标签，如下所示：
td {
border-bottom: 1pt solid black;
}
这样做会在每个 之间留下一个小空间td，如果您希望边框看起来好像它是tr标签，这可能是不可取的。可以说，为了“填补空白”，您需要利用元素border-collapse上的属性table并将其值设置为collapse，如下所示：
table {
border-collapse: collapse;
}
您可以使用该box-shadow属性来伪造tr元素的边框。调整box-shadow（以下表示为2px）的Y位置以调整厚度。
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
我尝试添加
table {
border-collapse: collapse;
}
旁边
tr {
bottom-border: 2pt solid #color;
}
然后注释掉border-collapse，看看有什么效果。只是让带有底部边框属性的 tr 选择器对我有用！
无边框 CSS ex。
无边框照片直播
CSS 边框 ex。
带边框照片的表
采用
table{border-collapse:collapse}
tr{border-top:thin solid}
用 CSS 属性替换“thin solid”。
将行显示为块。
tr {
display: block;
border-bottom: 1px solid #000;
}
并简单地显示替代颜色：
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
另一个解决方案是border-spacing属性：
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>我在使用这种方法时发现，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;
}
<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说，它同时适用于所有四个边界。
您可以在此处查看（并在线尝试）更多详细信息
几个有趣的答案。由于您只想要一个边框底部（或顶部），这里还有两个。假设你想要一个 3px 厚的蓝色边框。在样式部分中，您可以添加
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
在表代码中
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
无 CSS 边框底部：
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
您不能在 tr 元素上放置边框。这在 Firefox 和 IE 11 中对我有用：
<td style='border-bottom:1pt solid black'>
如果你不想
您可以使用::after选择器为 TR 添加边框：
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
这是我在必须在表格行之间放置空格的情况下使用的一个简单技巧，因此我无法在表格上添加边框折叠，最终结果：
希望能帮助到你 ：）
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}