表格垂直表头？

Question

我该如何使表头出现在表格的左侧作为一列，而不是像行一样显示在顶部？我有这样的标记：

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

- Richard Knop

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

- jakov

---

我同意这个答案。从语义上讲，“th”是“表头单元格”，你可以像使用“td”一样在任何地方使用它。 - Thariq Nugrohotomo

这是所选答案 - Dez Udezue

Answer 2

这个怎么样？

例子

CSS

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

jsFiddle。

更新

好吧，1、2 也应该作为列明显地显示出来。

jsFiddle。

它看起来在IE上也不太好用。你可能需要在语义和跨浏览器兼容性之间做出取舍。

更新

如果您有多行数据需要转换为列，请参考jsFiddle。

- alex

---

嗯，1、2也应该作为列，显然。 - Richard Knop

@Richard 那么显然就不会了吧 :P。请看更新。 - alex

猜猜在哪里无法运行...IE7。其他版本没有测试过。 - Gary Green

@Gary 我有一个怀疑，它可能不行。你可能需要在语义和跨浏览器兼容性之间做出权衡。 - alex

对代码进行了小修改以允许更多的“行”：http://jsfiddle.net/kwfetzxf/ 此外，两者似乎在IE11、Chrome和FF中都可以工作。 - LoPoBo

Answer 3

我需要一些不同的东西，但是@alex和@marion的答案让我朝着正确的方向开始了。问题是当你需要在表格中有很多项目时，“列”在较小的屏幕上开始堆叠得很奇怪。

感谢Serge在这里给出的答案，它引导我找到了这个解决方案。这个解决方案允许水平滚动，并且无论屏幕/窗口的大小如何，都不会堆叠得很奇怪。我在Chrome、Firefox、Opera、Edge和IE11中进行了测试。这是一个带有新“行”和“列”的正确对齐方式的fiddle：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>

- Michael

---

你太厉害了。谢谢你。我已经到处搜寻这个答案 - 没有人考虑在较小的屏幕上堆叠。 - Sensoray

Answer 4

你可以在这里查看结果。你的意思是像这样吗？

<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 来合并多个单元格。

- Dennis G

---

我不想要跨越多列/行的单元格。 - Richard Knop

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>

样式表：

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;
}

- Marion Hurteau

---

你赢得了金星！感谢分享你的答案！ - Michael

问题是，当调整大小时，这会导致所有列都被推到表格下面 - 你有什么方法来抵消这个问题吗？否则，这只适用于少量数据。 - Sensoray

Answer 6

如果您使用Bootstrap，可以通过table-reflow样式轻松实现此目的：http://v4-alpha.getbootstrap.com/content/tables/#reflow。

- Frank Fang

---

.table-reflow 在 Bootstrap 4 中已经被删除，因此不再是一个选项。请参见此提交。 - Scribblemacher