Html 表格垂直标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5800659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table vertical header?
提问by Richard Knop
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>
回答by jakov
Just use <th>as the first element in the row. Then add the scopeattribute, which has no visual impact, but you could use it e.g. in CSS.
只需<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>
回答by alex
How's this?
这个怎么样？
Example
例子
CSS
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
Update
更新
Well, the 1, 2 should also be as column, obviously.
嗯，显然 1、2 也应该作为列。
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
它看起来也像 IE 不喜欢这个。为了跨浏览器兼容性，您可能不得不牺牲语义。
回答by Michael
I needed something a little different, but the answers by @alexand @mariongot me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
我需要一些不同的东西，但@alex和@marion的答案让我朝着正确的方向开始。问题是，当您需要表格中的许多项目时，“列”开始在较小的屏幕上堆叠有趣。
Thanks to Serge for his answer herethat led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
感谢 Serge 在这里的回答，让我找到了这个解决方案。无论屏幕/窗口的大小如何，此解决方案都允许水平滚动并且不会堆叠有趣。我在 Chrome、Firefox、Opera、Edge 和 IE11 中对其进行了测试。这是新“行”和“列”正确对齐的小提琴：https: //jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
以防万一它从 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>
回答by Dennis G
You can see the result here. You mean like this?
您可以在此处查看结果。你的意思是这样？
<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>
You usually use rowspanand colspanfor cells spanning multiple columns/rows.
您通常将rowspan和colspan用于跨越多列/行的单元格。
回答by Marion Hurteau
This worked perfectly for me : (inspired from the first answer)
这对我来说非常有效：（灵感来自第一个答案）
Example here
示例在这里
html :
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 :
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;
}
回答by Frank Fang
If you use bootstrap, you can achieve this easily with the table-reflowstyle: http://v4-alpha.getbootstrap.com/content/tables/#reflow
如果您使用引导程序，则可以使用以下table-reflow样式轻松实现：http: //v4-alpha.getbootstrap.com/content/tables/#reflow
