表垂直标题？

Question

如何使表格标题在表格的左侧显示为列而不是在顶部显示为行？我有这个标记:

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Answer 1

只需将其<th>用作行中的第一个元素即可.然后添加scope没有视觉效果的属性,但您可以在CSS中使用它.

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>b</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>d</td>
    </tr>
  </tbody>
</table>

另见http://www.w3.org/TR/WCAG20-TECHS/H63

Answer 2

这个怎么样？

例

CSS

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

jsFiddle.

更新

嗯,显然,1,2也应该是列.

jsFiddle.

它看起来也像IE一样.您可能必须交换语义以实现跨浏览器兼容性.