jquery - 如何使用 CSS 在 HTML 表格中具有垂直记录和标题

Question

我有这样的 HTML 结构：

<table border="1">
<tbody>
    <tr>
        <td>header1</td><td>header2</td><td>header3</td>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td>
    </tr>
    <tr>
        <td>11</td><td>22</td><td>33</td>
    </tr>

</tbody>

我如何使用 CSS 使该表具有像这样的垂直行布局（垂直记录和标题）： http: //pastebay.net/1181219

顺便说一句，是否可以重新定义 HTML 结构，以便问题易于解决？我希望我可以使用 CSS 而不是 JavaScript 来解决。

Answer 1

使用 JavaScript，您可以通过在单元格上循环来将行转换为列。在第一行，您可以根据第一行的单元格数确定所需的行数。这假设所有行都有相同数量的单元格。

var $table = $("<table>");
$("tr").each(function (row) {
    $(this).find("td").each(function (idx) {
        if (row === 0) {
            $table.append($("<tr>").append(this));
        }
        else {
            $table.find('tr').eq(idx).append(this);
        }
    });
});
$table.appendTo("body");

http://jsfiddle.net/ExplosionPIlls/tkqRa/

Answer 2

HTML

<table id="mytable">
    <tr>
        <th> Header 1

        <td> L1 C2
        <td> L1 C3
        <td> L1 C4

    <tr>
        <th> Header 2

        <td> L2 C2
        <td> L2 C3
        <td> L2 C4

    <tr>
        <th> Header 3

        <td> L3 C2
        <td> L3 C3
        <td> L3 C4
</table>

CSS

#mytable tr > th{
    background:#69B;
    color:#FFF;
}