表格垂直标题? [英] Table vertical header?

问题描述

如何使表格标题以列的形式出现在表格的左侧，而不是以行的形式出现在表格的顶部?我有这个标记:

How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:

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

推荐答案

怎么样?

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

jsFiddle.

嗯，显然 1、2 也应该作为列.

Well, the 1, 2 should also be as column, obviously.

jsFiddle.

它看起来也像 IE 不喜欢这个.为了跨浏览器兼容性，您可能不得不牺牲语义.

It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.

这篇关于表格垂直标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！