如何在 HTML 中制作垂直表格？垂直，我的意思是行将是垂直的，表格标题在左侧。
我也需要它，以便我可以像在普通表中一样访问这些行（在这种情况下是垂直的），使用<tr>. 这是因为我动态获取一行的数据（如 A 行）并将其插入表中。我使用 angularJS 来避免 DOM 操作，所以我不是在寻找使用 Javascript 进行复杂的 DOM 操作。
带有垂直行的 HTML 表格
IT技术
javascript
html
css
dom
html-table
2021-02-23 18:35:29
6个回答
如果你想<tr>显示列，而不是行，试试这个简单的 CSS
tr { display: block; float: left; }
th, td { display: block; }
只要您使用单行单元格（表格行为被删除），这应该显示您想要的内容。
/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }<table>
<tr>
<th>name</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
</table>David Bushell 在此处提供了解决方案和实现：http : //dbushell.com/demos/tables/rt_05-01-12.html
诀窍是
display: inline-block;在表格行和white-space: nowrap;表格主体上使用。
您可以<th>用作行中的第一个单元格。这是一个小提琴：http : //jsfiddle.net/w5nWG/
@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();
}
<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; }
AFAIK，没有神奇的解决方案来改变这个。至于旋转（90 度），这很可能会将整个桌子转向一边，类似于将一张纸旋转 90 度时的样子，这不是您想要的（我认为？）。
如果这是可能的（并且是现实的），我建议在 HTML 本身中更改它。
正如评论中所指出的，这里没有任何建议，所以这里有一个使用 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++;
});
});