如何在表格中添加水平线

Posted 2023-03-05

【中文标题】如何在表格中添加水平线

【英文标题】：How to add horizontal lines in Table

【发布时间】：2018-01-10 22:00:18

【问题描述】：

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

编辑/更新：

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

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>

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

【问题讨论】：

你为什么只给 tr 和 table 添加边框？你只需要为 th 和 td 添加一个边框和填充底部就可以了

更新答案。

【参考方案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>

【参考方案2】：

试试下面的代码

<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>

【参考方案3】：

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

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

对于需要的额外填充 - 只需添加 class="extra-padding-bottom" 属性 并添加适当的 CSS 代码：

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

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

【参考方案4】：

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>

【参考方案5】：

对我有用的解决方案是在列级别定义 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;

【参考方案6】：

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

我试过了，效果很好