如何使用HTML、CSS或Bootstrap实现截图所示的竖向向上表格表头

错误原因 #

1. HTML结构不规范：<tbody> 下的表头单元格 <th> 必须包裹在 <tr> 标签内，且需要添加 rowspan="2" 属性合并后续两行数据的行高，否则浏览器会自动补全多余标签导致排版错乱。
2. CSS属性不符合预期：现有属性搭配出来的文字方向和对齐效果不符合左侧竖排表头的阅读习惯。

修正后代码 #

CSS代码

.vertical-up-left {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* 可选：添加内边距调整间距 */
  padding: 0 8px;
}
/* 可选：给表格加边框方便区分单元格 */
table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

HTML代码

<table>
  <thead>
    <tr>
      <th>
        <div>Heading 1</div>
      </th>
      <th>
        <div>Heading 2</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">
        <div class="vertical-up-left"><b>LEFT DESIRED HEADING</b></div>
      </th>
      <td>Typical cell</td>
      <td>Typical cell</td>
    </tr>
    <tr>
      <td>Typical Cell cell</td>
      <td>Typical Cell</td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者nasiphi vinqishe