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;
}

如何使用CSS在HTML表格中创建垂直记录和标题

2 个答案: