如何用CSS实现表格网格不同旋转角度的文本对齐？

针对表格网格的行、列、对角线标签对齐需求，可通过以下CSS技巧实现标签边缘贴紧网格、长数字向外延伸的效果：

核心实现代码 #

1. 行标签（水平方向） #

直接通过文本对齐属性让标签贴紧网格右侧，长数字向左延伸：

.row-label {
  text-align: end;
  padding-right: 8px;
}

2. 列标签（垂直方向） #

利用writing-mode改变文本方向，配合text-align: end让标签贴紧网格顶部，长数字向下延伸：

.col-label {
  writing-mode: vertical-rl;
  text-align: end;
  padding: 0 4px;
}

3. 对角线标签 #

通过绝对定位+旋转原点控制，让标签起始端对齐网格对角线顶点，长数字向外延伸：

.diag-label {
  position: relative;
  height: 0;
  overflow: visible;
  padding: 0;
}
.diag-label span {
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  white-space: nowrap;
  bottom: -20px;
  left: 20px;
}

完整示例 #

<table>
  <thead>
    <tr>
      <th></th>
      <th class="col-label">12345</th>
      <th class="col-label">678</th>
      <th class="col-label">9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="row-label">4567</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td class="row-label">12</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td class="row-label">890123</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td class="diag-label"><span>101112</span></td>
      <td></td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  margin: 20px;
}
td, th {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}
.row-label, .col-label, .diag-label {
  border: none;
}

关键说明 #

• 垂直标签的writing-mode: vertical-rl会让文本从右到左垂直排列，text-align: end确保文本末端（数字开头）贴紧网格边缘
• 对角线标签的transform-origin: bottom left是核心，让旋转后的标签起始点对齐网格的对角线拐角，配合绝对定位调整位置即可适配不同网格大小
• 所有标签单元格去掉边框，避免干扰视觉对齐效果

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