CSS表格样式：独立边框与行组边框实现求助

我太懂这种纠结了！既要给表头标题加上独立的下划线，又要在两组Name行之间划出清晰的分隔线，结果用border-collapse试来试去，总是顾此失彼对吧？我之前做后台表格样式的时候也踩过这个坑，给你分享两个亲测有效的解决思路：

思路一：用border-collapse: separate替代合并模式 #

放弃边框合并，改用边框分离模式，这样就能分别控制表头的下划线和行组的分隔线，不会互相干扰：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody class="row-group">
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>alice@test.com</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>bob@test.com</td>
    </tr>
  </tbody>
  <tbody class="row-group">
    <tr>
      <td>Charlie</td>
      <td>35</td>
      <td>charlie@test.com</td>
    </tr>
    <tr>
      <td>Diana</td>
      <td>28</td>
      <td>diana@test.com</td>
    </tr>
  </tbody>
</table>

对应的CSS：

table {
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格间距 */
  width: 100%;
}

/* 表头独立下划线 */
thead th {
  border-bottom: 1px solid #222;
  padding: 10px;
  text-align: left;
}

tbody td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* 两组行之间的粗分隔线 */
.row-group:nth-child(3) tr:first-child td {
  border-top: 2px solid #222;
}

这种方式的核心是让边框完全独立，表头的下划线只作用于表头单元格，行组的分隔线单独给第二组的第一行加顶部边框，不会和其他边框合并。

思路二：用伪元素做表头下划线，保留border-collapse #

如果不想改边框合并模式，可以用CSS伪元素模拟表头的下划线，这样就不会和行的边框冲突：

table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  position: relative;
  padding: 10px;
  text-align: left;
}

/* 用伪元素生成独立的表头下划线 */
thead th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #222;
}

tbody td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* 行组分隔线直接给tbody加顶部边框 */
.row-group:nth-child(3) {
  border-top: 2px solid #222;
}

这里的关键是用::after伪元素在表头单元格底部生成一条独立的线，不依赖表格的边框属性，这样即使边框合并，也不会影响这条线的显示，同时行组之间的分隔线可以直接通过tbody的边框来实现。

两种方法都能满足你的需求，你可以根据自己的实际HTML结构和其他样式需求来选～

内容的提问来源于stack exchange，提问作者NotoriousWebmaster