表格垂直标题？

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 对此也犹豫不决。你可能不得不用语义来换取跨浏览器的兼容性。

Answer 3

您可以看到结果here。你的意思是这样吗？

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th colspan="2">Letters</th>
        </tr>
        <tr>
            <th></th>
            <th>a</th>
            <th>b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">Numbers</td>
            <td>1</td>
            <td>4</td>
        </tr>
        <tr>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

您通常使用rowspan 和colspan 表示跨越多列/多行的单元格。

Answer 4

我需要一些不同的东西，但@alex 和@marion 的回答让我开始朝着正确的方向前进。问题是，当您需要表格中的许多项目时，“列”开始在较小的屏幕上堆叠起来很有趣。

感谢 Serge 的回答 here 让我找到了这个解决方案。该解决方案允许水平滚动并且无论屏幕/窗口的大小如何都不会有趣。我在 Chrome、Firefox、Opera、Edge 和 IE11 中对其进行了测试。这是新“行”和“列”正确对齐的小提琴：https://jsfiddle.net/berrym/6r3zvaef/21/

以防万一它从 JSFiddle 中消失：

<style>
table{
  display:block;
  white-space:nowrap;
  width:100%;
}
td, th {
  border-bottom: 1px solid red;
  border-collapse: collapse;
}
thead {
  float: left;
  background: yellow;
  width: 10%;
}
thead tr {
  width:100%;
  float:left;
}
thead th {
  display: block;
}
tbody {
  float: left;
  width: 90%;
}
tbody tr {
  display: inline-block;
}
tbody td {
  float:left;
  width:100%;
}
</style>
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
  </tbody>
</table>

Answer 5

这对我来说非常有效：（灵感来自第一个答案）

例如here

html：

 <table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
  </tbody>
</table>

css：

table, td, th {
  border: 1px solid red;
}

thead {
  float: left;   
}
thead th {
  display: block;   
  background: yellow;
}

tbody {
  float: left;   
}
tbody tr {
  display: block;
  float: left;
}
tbody td {
  display: block;
}

Answer 6

如果您使用引导程序，则可以使用 table-reflow 样式轻松实现此目的：http://v4-alpha.getbootstrap.com/content/tables/#reflow