HTML表格的左侧具有垂直旋转的标题

Question

我正在尝试创建一个html表，以填充一些如下图所示的数据。我能够使用简单的CSS来旋转文本，但是在弄清楚如何组织子行/列时遇到了麻烦。是否可以使用html / css表或至少使用网格？

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>

Answer 2

我能够解决这个问题，将每个标签视为自己的行，并分别在其上构建数据。

    <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>