html - 左侧带有垂直旋转标题的 HTML 表格

Question

我正在尝试创建一个 html 表来填充一些如下图所示的数据。我可以使用简单的 css 旋转文本，但无法弄清楚如何组织子行/列。这可能与 html/css 表或至少网格吗？

标签： htmlgridcss-tables

Answer 1

您可以使用简单的表格和 CSS 属性 : transform: rotate()，请参阅：

table {
  margin-top: 50px;
}

.rotate {
  transform: rotate(-90deg)
}

<table>
  <tr>
    <td class="rotate" rowspan="2">
      Rotated cell
    </td>
    <td>
      Normal cell
    </td>
  </tr>
  <tr>
    <td>
      Normal cell
    </td>
  </tr>
<table>