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/