用CSS将水平表转换为垂直表

Question

是否可以仅使用CSS将水平表转换为垂直表？

以下是我的资料：

我想要的是：

第一报头单元第一数据单元

第2首标单元第2数据单元

第三报头单元第三数据单元

第四报头单元第四数据单元

我的代码：

null

table{
  width: 100%;
  border-collapse: collapse;
}

td, th {
  text-align: left;
  border: 1px solid #ddd;
  padding: 10px;
}

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

null

Answer 1

没有任何合适的CSS解决方案来解决这个问题，绝对不是一个“标准”的解决方案。这真的不是一个标准的事情要做。

但事实上至少有一个CSS解决方案（带有浮点）:http://jsfidle.net/xknkl/3/

null

tr { display: block; float: left; }
th, td { display: block; }

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