html - 如何在表格中添加水平线

Question

我想要两个记录之间的水平线和一些额外的底部填充来添加一个符号

编辑/更新:

我正在硬编码我想要的内容如下

table {
  border: 1px solid black;
  padding: 0em 2em;
}

tr {
  border: 1px solid black;
  padding: 0em 2em;
}

tr:nth-child(3) {
  margin: 0px;
  padding: 0px;
}

tr:nth-child(7) {
  background-color: red
}

td:nth-child(21) {
  border-bottom: 1px solid blue;
}

<table>
  <tr>
    <th colspan="2">Old_records</th>
    <td>32</td>
  </tr>
  
  <tr>
    <th>Records_fetched</th>
    <td colspan="2">100</td>
  </tr>
  
  <tr>
    <td colspan="3"> -----------------------------</td>
  </tr>
  
  <tr>
    <th>Sum </th>
    <td colspan="2">132</td>
  </tr>

  <tr>
    <th>New_records</th>
    <td></td>
    <td>80</td>
  </tr>
  
  <tr>
    <td colspan="3"> -----------------------------</td>
  </tr>

  <tr>
    <th>Differnce </th>
    <td colspan="2">52</td>
  </tr>
</table>

我仍然需要添加符号，并且我有更好的方法来添加边框而不是这一行 <tr><td colspan="3"> -----------------------------</td></tr>

有人可以建议我如何正确地做到这一点吗？

Answer 1

在 tr 中添加边框并为表格应用 border-collapse:collapse。

table { 
  border: 1px solid black;
  padding:0em 2em;
  border-collapse: collapse;
}
tr {
  border-bottom: 1px solid black;
}
td {
  padding: 2em;
}

<table>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Records_fetched</th>
    <td>100</td>
  </tr>
  <tr>
    <th>NEw_records</th>
    <td>80</td>
  </tr>
</table>