如何用Vanilla CSS实现网格样式的灵活表格？

我来帮你解决这个竖排表头表格的问题，先看看你当前代码里的几个核心问题，再给出稳定且灵活的实现方案：

你当前代码的问题 #

• HTML结构不匹配：表头行(<tr>)只有3个<th>，但数据行却有4个<td>，这种结构不一致会直接导致表格布局错乱
• 错误的布局方式：给<table>设置display: flex完全破坏了表格原生的布局机制，表格是基于表格网格模型的，用flex会打乱行列的对齐关系

解决方案：基于原生表格模型实现 #

我们要保留表格原生的布局能力，同时通过CSS实现竖排表头，还要保证增减行列时布局不会崩溃。核心思路是用table-layout: fixed来固定表格布局逻辑，配合writing-mode实现自然的竖排文本。

完整代码示例 #

CSS 部分

/* 基础表格样式，保证布局稳定 */
table {
  width: 100%;
  table-layout: fixed; /* 关键：固定布局，列宽由设置决定，不会因内容变化打乱 */
  border-collapse: collapse; /* 合并边框，避免间距 */
  margin: 20px 0;
}

/* 竖排表头样式 */
th:not(:first-child) {
  writing-mode: vertical-rl; /* 让文本垂直排列，从右到左 */
  text-orientation: mixed; /* 保证英文和中文都正确显示 */
  padding: 10px 5px;
  background-color: #f5f5f5;
}

/* 通用单元格样式 */
td, th {
  border: 1px solid #ddd;
  text-align: center;
  padding: 12px;
}

/* 第一列（行标题）设置固定宽度 */
td:first-child, th:first-child {
  width: 120px;
  background-color: #fafafa;
}

HTML 部分（修复结构，保证行列数量匹配）

<table>
  <tr>
    <th>行标题</th> <!-- 第一列的表头 -->
    <th>column one</th>
    <th>column two</th>
    <th>column three</th>
  </tr>
  <tr>
    <td>row one</td>
    <td>c</td>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>row two</td>
    <td>c</td>
    <td>c</td>
    <td>c</td>
  </tr>
  <!-- 新增一行测试灵活性 -->
  <tr>
    <td>row three</td>
    <td>new content</td>
    <td>more data</td>
    <td>test</td>
  </tr>
</table>

为什么这个方案是灵活的？ #

1. table-layout: fixed：这个属性让表格的列宽由我们设置的宽度决定，或者自动均分剩余空间，不会因为单元格内容的长度变化而打乱整个表格布局，增减行列时只要保证HTML结构（每行单元格数量一致），表格就会自动调整。
2. 原生表格模型：保留了表格的行列对齐特性，不需要用flex或grid重新构建，避免了自定义布局带来的兼容性和稳定性问题。
3. writing-mode替代transform：相比transform: rotate(-90deg)，writing-mode是原生的文本排列方式，不会改变元素的盒模型尺寸，表头的高度和宽度会自动适配内容，不会出现布局偏移。

增减行列的测试方法 #

• 增加列：在表头行新增一个<th>，然后在每个数据行新增对应的<td>，表格会自动均分剩余宽度（如果没有设置固定列宽），布局不会崩溃。
• 增加行：直接新增<tr>和对应的<td>，表格会自动扩展高度，保持行列对齐。

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