CSS 表格 - 添加边距列和行边框底部

Posted 2023-03-05

【中文标题】CSS 表格 - 添加边距列和行边框底部

【英文标题】：CSS table - add margin columns and row border-bottom

【发布时间】：2017-03-29 00:06:26

【问题描述】：

我有一个 html 表格元素，我正在尝试在列之间添加边距，所以我使用了这些 css 属性：

table 
 border-collapse: separate;
 border-spacing: 36px 0px;

现在我想在整个行中添加边框底部，包括标题和正文中的每个 tr，但边框没有出现。 我用过：

tr 
 border-bottom: 1px solid blue;

只有在我使用时才会出现：

table 
 border-collapse: collapse;

但是我不会在列之间有边距。

我添加了我的DEMO here。

【参考方案1】：

您可以使用:after 伪类来设置样式，如下所示：

body 
  background: #eee;


.mytable
  border-collapse: separate;
  background-color: white;
  border-spacing: 36px 0px;
  position: relative;
  overflow: hidden;


.mytable td,
.mytable th 
  border-left: 1px solid black;
  border-right: 1px solid black;


.mytable th:after,
.mytable td:after 
  position: absolute;
  background: blue;
  margin-top: 18px;
  content: '';
  height: 1px;
  right: 0;
  left: 0;

<table class="mytable">
  <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ddd</td>
      <td>eee</td>
      <td>fff</td>
    </tr>
    <tr>
      <td>ggg</td>
      <td>hhh</td>
      <td>iii</td>
    </tr>
  </tbody>
</table>