如何实现跨表格单元格边框的连续虚线连接效果？

默认表格的单元格边框会把虚线分割开，没法直接用border属性做出跨边框的连续虚线，用伪元素是最靠谱的方案，分两种场景给你代码：

场景1：仅表头下方加一条连续虚线 #

<table class="dashed-header-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

.dashed-header-table {
  border-collapse: collapse; /* 合并单元格边框，消除间隙 */
  width: 100%;
}

.dashed-header-table th,
.dashed-header-table td {
  border: 1px solid #333; /* 单元格垂直边框 */
  padding: 8px;
  text-align: left;
}

.dashed-header-table tbody::before {
  content: "";
  display: block;
  height: 1px;
  /* 自定义虚线：颜色#333，线段长4px，间隔2px */
  background: repeating-linear-gradient(to right, #333 0, #333 4px, transparent 4px, transparent 6px);
  margin: -1px 0; /* 让虚线和表头底部完全对齐 */
}

场景2：每一行上方都加连续虚线 #

如果需要给表格的每一行（除表头）上方都加跨边框的虚线，用绝对定位的伪元素：

.dashed-row-table {
  border-collapse: collapse;
  width: 100%;
}

.dashed-row-table th,
.dashed-row-table td {
  border: 1px solid #333;
  padding: 8px;
  text-align: left;
}

.dashed-row-table tbody tr {
  position: relative;
}

.dashed-row-table tbody tr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, #333 0, #333 4px, transparent 4px, transparent 6px);
  z-index: 1; /* 防止虚线被单元格内容覆盖 */
}

/* 去掉第一行的虚线（避免和表头下方的线重复） */
.dashed-row-table tbody tr:first-child::before {
  display: none;
}

调整虚线样式说明 #

你可以修改repeating-linear-gradient里的参数：

• #333：虚线的颜色，换成你需要的颜色值
• 4px：单个虚线线段的长度
• 6px：线段之间的间隔长度（间隔=6-4=2px）

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