带有垂直行的 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16918094/
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
HTML Table with vertical rows
提问by vishesh
How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.
如何在 HTML 中制作垂直表格？垂直，我的意思是行将是垂直的，表格标题在左侧。
I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.
我也需要它，以便我可以像在普通表中一样访问这些行（在这种情况下是垂直的），使用<tr>. 这是因为我动态获取一行的数据（如 A 行）并将其插入表中。我正在使用 angularJS 来避免 DOM 操作，所以我不是在寻找使用 Javascript 进行复杂的 DOM 操作。
采纳答案by sebastian
You can use <th>as the first cell in the row.
Here's a fiddle: http://jsfiddle.net/w5nWG/
您可以<th>用作行中的第一个单元格。这是一个小提琴：http: //jsfiddle.net/w5nWG/
@vishesh so you want to transpose your table after DOM ready? try this http://gist.github.com/pgaertig/2376975
@vishesh 所以你想在 DOM 准备好后转置你的表格？试试这个http://gist.github.com/pgaertig/2376975
$(function() {
var t = $('#thetable tbody').eq(0);
var r = t.find('tr');
var cols= r.length;
var rows= r.eq(0).find('td').length;
var cell, next, tem, i = 0;
var tb= $('<tbody></tbody>');
while(i<rows){
cell= 0;
tem= $('<tr></tr>');
while(cell<cols){
next= r.eq(cell++).find('td').eq(0);
tem.append(next);
}
tb.append(tem);
++i;
}
$('#thetable').append(tb);
$('#thetable').show();
}
回答by Jan Turoň
If you want <tr>to display columns, not rows, try this simple CSS
如果你想<tr>显示列，而不是行，试试这个简单的 CSS
tr { display: block; float: left; }
th, td { display: block; }
This should display what you want as far as you work with single-line cells (table behavior is dropped), see the fiddle.
只要您使用单行单元格（表格行为被删除），这应该显示您想要的内容，请参阅fiddle。
回答by Pratyush
David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html
David Bushell 在此处提供了解决方案和实现：http: //dbushell.com/demos/tables/rt_05-01-12.html
The trick is to use
display: inline-block;on the table rows andwhite-space: nowrap;on the table body.
诀窍是
display: inline-block;在表格行和white-space: nowrap;表格主体上使用。
回答by Nithiyakumar K
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
table { border-collapse: collapse; }
table tr { display: block; float: left; }
table tr tr{ display: block; float: left; }
table th, table td { display: block; border: none; }
回答by davewoodhall
AFAIK, there is no magic solution to switch this around. As for a rotation(90deg), that would most likely turn the whole table to the side, similar to how a sheet of paper would look if you turned in 90 degrees, and that's not what you want (I think?).
AFAIK，没有神奇的解决方案来改变这个。至于旋转（90 度），这很可能会将整个桌子转向一边，类似于将一张纸旋转 90 度时的样子，这不是您想要的（我认为？）。
If this is possible (and realistic), I would suggest changing it in the HTML itself.
如果这是可能的（并且是现实的），我建议在 HTML 本身中更改它。
As indicated in the comments, there is no suggestion here, so here's a basic javascript alternative [even if this is not what you were looking for] using jQuery. Without knowing your experience, I've taken the time to comment everything to be sure you get what the code is doing.
正如评论中所指出的，这里没有任何建议，所以这里有一个使用 jQuery 的基本 javascript 替代方案 [即使这不是您想要的]。在不了解您的经验的情况下，我花时间对所有内容进行评论，以确保您了解代码在做什么。
// Change the selector to suit your needs
$('table').each(function(){
var table = $(this), // Reference each table in the page
header = $('thead', table), // Reference the table head
headings = []; // Set an array for each column
// If the table doesn't have a header, use it's footer for column titles
if(!header.length)
header = $('tfoot', table);
// If there's no header nor footer, skip to the next table
if(!header.length)
continue;
// Loop each heading to get the header value
$('th', header).each(function(){
var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
headings.push(heading); // Add heading value to array
});
// Make sure the content is wrapped in a tbody element for proper syntax
if(!$('tbody', table).length)
table.wrapInner('<tbody></tbody>');
// Set counter to reference the heading in the headings array
var x = 0;
// Loop through each row in the table
$('tbody tr').each(function(){
var row = $(this),
label = headings[x];
// Add the heading to the row, as a <th> for visual cues (default: bold)
row.prepend('<th>'+label+'</th>')
// Move to the next value in the headings value
x++;
});
});
回答by learner
try this
尝试这个
<table>
<thead>
<tr>
<th>id</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
css:
css：
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: right;
}
回答by Milche Patern
Maybe this link won't help : rotate a table 90 degreesneither would this one : http://www.w3.org/TR/html401/struct/tables.html
也许此链接无济于事：将表格旋转 90 度，此链接也不会 ：http: //www.w3.org/TR/html401/struct/tables.html
Otherwise, you can try this, has another user suggested (rejected and downvoted) :
否则，你可以试试这个，有另一个用户建议（拒绝和投反对票）：
table {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
This sounds silly, but hey, it's not worse than just not knowing the 'verry basic' HTML 4 table model.
这听起来很愚蠢，但是嘿，这并不比不了解“非常基本”的 HTML 4 表格模型更糟糕。
回答by Mukesh Soni
You can use css transforms to first transform table by 90 degrees and then rotate text within each cell by 90 degrees.
您可以使用 css 转换首先将表格转换 90 度，然后将每个单元格内的文本旋转 90 度。
table {
position: absolute;
/* Webkit */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
top: 100px; /* adjust as per your need */
}
table > tr > td > span.table-text {
-webkit-transform: rotate(-90deg);
}
I have not tested it though. Just an idea.
不过我还没有测试过。只是一个想法。
