HTML Table 在左侧垂直旋转 headers

Question

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

Answer 1

您可以使用简单的 table 和 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>

Answer 2

我能够解决这个 b 将每个标签视为它自己的行并单独构建数据。

    <table>
    <tr>
      <td rowspan="4" class="rotate">Header Text</td>
      <td class="rotate pole">SubHeader Text 1</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>

      <td class="rotate pole">SubHeader Text 2</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 3</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 4</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
  </table>

HTML Table 在左侧垂直旋转 headers

HTML Table with vertically rotated headers on the left side

html

grid

css-tables