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

我试图创建一个html表，用一些看起来像下图的数据填充。我能够用简单的css旋转文本，但在组织子行/子列时遇到困难。这在html/css表或至少网格中是可能的吗

---

您可以使用一个简单的表格和CSS属性：

transform:rotate（）

，请参阅：

表格{
边缘顶部：50px；
}
.轮换{
变换：旋转（-90度）
}

旋转单元
正常细胞
正常细胞

您可以使用一个简单的表和CSS属性：

transform:rotate（）

，请参阅：

表格{
边缘顶部：50px；
}
.轮换{
变换：旋转（-90度）
}

旋转单元
正常细胞
正常细胞

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

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

标题文本
分标题正文1

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题文本2

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题文本3

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题正文4

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.

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

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

标题文本
分标题正文1

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题文本2

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题文本3

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.
分标题正文4

文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本


六,
六,
六,
六,

6.

感谢您的回复，到目前为止，旋转桌子上的文本并不是我的问题（很抱歉，我不清楚这一点）。我更想弄清楚如何将所有单元格嵌套在这些旋转的列样式行下。感谢您的时间。感谢您的回复，到目前为止，旋转桌子上的文本并不是我的问题（很抱歉，我不清楚这一点）。我更想弄清楚如何将所有单元格嵌套在这些旋转的列样式行下。谢谢你的时间。是的！我也会这样做，很好地弄明白了：）是的！我也会这样做，很好地解决了这个问题：）