HTML表垂直行 [英] HTML Table with vertical rows
问题描述
如何在HTML中制作垂直表格?按垂直方向,我的意思是在左侧的表格标题行与垂直。
How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.
我也需要它,所以我可以访问这些行(在这种情况下垂直) ,< tr>
。这是因为我为一行动态获取数据(类似于行A),并将其插入表中。我使用angularJS避免DOM操作,所以我不是在寻找使用Javascript的复杂的DOM操作。
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.
推荐答案
code>< th> 作为行中的第一个单元格。
这是一个小提琴: http://jsfiddle.net/w5nWG/
You can use <th>
as the first cell in the row.
Here's a fiddle: http://jsfiddle.net/w5nWG/
@vishesh所以你想在DOM准备好后转置你的表吗?请尝试此 http://gist.github.com/pgaertig/2376975
@vishesh so you want to transpose your table after DOM ready? try this 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();
}
这篇关于HTML表垂直行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!