如何在表格中添加水平线

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>

有人能建议我如何正确地实现吗？

- Shivkumar kondi

---

你为什么刚才给 tr 和 table 添加了边框？你只需要给 th 和 td 添加边框和 padding-bottom 就可以了，这样就可以解决问题了。 - Louis 'LYRO' Dupont

更新的答案。 - Vadim Ovchinnikov

Answer 1

在表格中的每个元素中添加边框，并应用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>

- Mukesh Ram

Answer 2

我的解决方案是在列级别定义css属性，并将colspan定义为表中的列数。

HTML-

<tr class="border_bottom">
    <td colspan="6"></td>
</tr>

CSS -

tr.border_bottom td {
    border-bottom: 1px solid #cccccc;
    color: #707070;
}

table {
    border-collapse: collapse;
}

- Pukhraj soni

Answer 3

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(even) > th,
tr:nth-child(even) > td {
  padding-bottom: 0.75em;
  border-bottom: 1px dashed #222;
}

tr:nth-child(odd) > th,
tr:nth-child(odd) > td {
  padding-top: 0.75em;
}

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

  <tr>
    <th>New_records</th>
    <td></td>
    <td>80</td>
  </tr>

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

- Vadim Ovchinnikov

Answer 4

尝试下面的代码

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>
<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>

- Malathy Venkatesan

Answer 5

            <tr>
                <td><hr> </td> 
                <td><hr> </td>
            </tr>

我试过这个，它有效。

- Priya

Answer 6

要插入一个空行，你可以写：

<tr>
  <td colspan="2">&nbsp;</td>
</tr>

如果需要额外的填充，只需添加一个class="extra-padding-bottom"属性，并添加适当的CSS代码：

.extra-bottom-padding {
    padding-bottom: 100px;
}

例如：<td class="extra-padding-bottom">

- Sergej