仅使用CSS能否将横向表格转换为纵向表格？

没问题！要把这个横向表格转换成你想要的纵向结构，其实只需要调整HTML的表格行结构就行，同时原有的CSS样式基本可以直接复用（还能加一点点小优化让它更美观）。

调整后的HTML代码 #

<table>
  <tbody>
    <tr>
      <th>1st header cell</th>
      <td>1st data cell</td>
    </tr>
    <tr>
      <th>2nd header cell</th>
      <td>2nd data cell</td>
    </tr>
    <tr>
      <th>3rd header cell</th>
      <td>3rd data cell</td>
    </tr>
    <tr>
      <th>4th header cell</th>
      <td>4th data cell</td>
    </tr>
  </tbody>
</table>

优化后的CSS（可选） #

原CSS已经能满足基础展示需求，如果你想让表头更突出、布局更整齐，可以加一点小改动：

table{ 
  width: 100%; 
  border-collapse: collapse; 
}
td, th { 
  text-align: left; 
  border: 1px solid #ddd; 
  padding: 10px; 
}
/* 新增优化样式 */
th {
  background-color: #f5f5f5; /* 给表头加浅灰色背景，区分内容 */
  width: 30%; /* 固定表头宽度，避免不同长度的表头导致布局错乱 */
}

这样修改后，表格就会以你想要的纵向形式呈现——每行对应一个表头和它的数据单元格，结构清晰，样式也保持了原有的简洁风格。

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