html - 将边框底部添加到表格行

Question

我有一个 3 x 3 的表格。我需要一种方法来为每一行的底部添加边框 tr并赋予它特定的颜色。

首先我尝试了直接的方式，即:

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

但这没有用。所以我添加了这样的 CSS:

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

还是不行。

我更喜欢使用 CSS，因为这样我就不需要添加 style属性到每一行。我还没有添加 border <table> 的属性.我希望这不会影响我的 CSS。

Answer 1

添加 border-collapse:collapse到你的餐 table 规则:

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>

Link