如何用HTML/CSS实现表格单元格斜向分割？

要实现你需要的表格斜角分隔效果，完全可以通过目标单元格的::before伪元素实现，无需额外添加空单元格，以下是具体方案：

核心思路 #

利用表格左上角单元格的伪元素，通过绘制三角形边框模拟斜角分隔线，同时借助定位调整位置，避免干扰单元格原有边框和内容。

实现代码 #

HTML结构（简洁无冗余） #

<table class="corner-table">
  <tr>
    <th class="corner-cell"></th>
    <th>列标题1</th>
    <th>列标题2</th>
  </tr>
  <tr>
    <td>行标题1</td>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>行标题2</td>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

CSS样式 #

.corner-table {
  border-collapse: collapse;
  border: 1px solid #000;
}

.corner-table th, .corner-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  position: relative; /* 为伪元素提供定位基准 */
  background-color: #fff; /* 确保背景统一，避免伪元素透底 */
}

/* 绘制左上角单元格的斜角分隔 */
.corner-cell::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 用边框绘制三角形，模拟斜角 */
  border-bottom: 28px solid #fff; /* 颜色与单元格背景一致 */
  border-left: 28px solid transparent;
  /* 微调位置，让斜角和单元格边框完美贴合 */
  transform: translateX(1px) translateY(-1px);
}

方案优势 #

• 无需额外空单元格，HTML结构更简洁、语义化
• 伪元素仅作用于目标单元格，样式修改更精准，维护成本低
• 用边框绘制三角形比旋转元素的渲染性能更优，不会出现模糊或错位问题

拓展优化 #

• 若要适配不同大小的单元格，可以将伪元素的边框尺寸改为相对单位（比如em），或者用CSS变量动态控制：

  :root {
    --corner-size: 28px;
  }
  .corner-cell::before {
    border-bottom: var(--corner-size) solid #fff;
    border-left: var(--corner-size) solid transparent;
  }
  

• 支持深色模式时，只需将border-bottom的颜色改为currentColor或对应深色背景色即可。

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