0

私は次のような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構造を再定義することは可能ですか？JavaScriptの代わりにCSSを使用して解決できることを願っています。

4

2 に答える 2

4

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/

于 2013-02-08T04:03:01.977 に答える
1

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;
}
于 2013-02-08T04:14:08.940 に答える