HTML 表格单元格对角线设置教程：使用 CSS 实现

要在 HTML 表格中设置单元格的对角线，可以使用 CSS 的 border 属性。具体步骤如下：

在 HTML 文件中创建一个表格。
使用 CSS 选择器选择要设置对角线的单元格。
使用 CSS 的 border 属性设置单元格的边框样式。
- 使用 border-top、border-right、border-bottom、border-left 属性设置单元格的边框样式。
- 使用 border-color 属性设置边框的颜色。
- 使用 border-width 属性设置边框的宽度。
使用 CSS 的 transform 属性旋转对角线。
- 使用 rotate() 函数设置旋转角度。
- 使用 skew() 函数设置斜切角度。
- 使用 matrix() 函数设置自定义的变换矩阵。

以下是一个示例代码，展示如何在 HTML 表格中设置单元格的对角线：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  text-align: center;
}

.diagonal {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(-45deg);
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
    <td class='diagonal'></td>
    <td></td>
  </tr>
  <tr>
    <td class='diagonal'></td>
    <td></td>
    <td class='diagonal'></td>
  </tr>
  <tr>
    <td></td>
    <td class='diagonal'></td>
    <td></td>
  </tr>
</table>

</body>
</html>

在上面的示例中，我们创建了一个 3x3 的表格，并在其中的单元格设置了对角线。使用 .diagonal 类选择器选择要设置对角线的单元格，并使用 border-top 和 border-bottom 属性设置边框样式。同时，使用 transform 属性的 rotate() 函数将对角线旋转了 -45 度，使其呈现对角线的效果。