web-dev-qa-db-ja.com

縦の行を持つHTMLテーブル

HTMLで垂直テーブルを作成するにはどうすればよいですか？垂直とは、行が垂直で、左側にテーブルヘッダーがあることを意味します。

enter image description here

<tr>を使用して、通常のテーブルのようにこれらの行（この場合は垂直）にアクセスできるようにする方法も必要です。これは、1つの行（行Aなど）のデータを動的に取得して、テーブルに挿入するためです。 angularJSを使用してDOM操作を回避しているため、JavaScriptによる複雑なDOM操作を探していません。

javascripthtmlcssdomhtml-table
15
vishesh

行の最初のセルとして<th>を使用できます。これがフィドルです： http://jsfiddle.net/w5nWG/

@vishesh DOMの準備ができた後でテーブルを転置したいですか？これを試してください 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();
}
0
sebastian

お望みならば <tr>行ではなく列を表示するには、この簡単なCSSを試してください

tr { display: block; float: left; }
th, td { display: block; }

これにより、単一行のセルを操作する限り、必要なものが表示されます（テーブルの動作は削除されます）。 フィドル を参照してください。

61
Jan Turoň

David Bushellがソリューションと実装をここに提供しています： http://dbushell.com/demos/tables/rt_05-01-12.html

コツはdisplay: inline-block;テーブルの行とwhite-space: nowrap;テーブル本体。

4
Pratyush

私の知る限り、これを切り替える魔法の解決策はありません。回転（90度）に関しては、それはおそらくテーブル全体を横に向けるでしょう、あなたが90度回転した場合の紙のシートがどのように見えるかのように、それはあなたが望むものではありません（私は思いますか？）。

これが可能（かつ現実的）な場合は、HTML自体を変更することをお勧めします。

コメントに示されているように、ここでは提案がないため、jQueryを使用した基本的なjavascriptの代替案（これが目的のものではない場合でも）を使用します。私はあなたの経験を知らずに、すべてのコメントに時間をかけて、コードが何をしているかを確実に理解できるようにしました。

// Change the selector to suit your needs
$('table').each(function(){
    var table       = $(this), // Reference each table in the page
        header      = $('thead', table), // Reference the table head
        headings    = []; // Set an array for each column

    // If the table doesn't have a header, use it's footer for column titles
    if(!header.length)
        header = $('tfoot', table);
    // If there's no header nor footer, skip to the next table
    if(!header.length)
        continue;

    // Loop each heading to get the header value
    $('th', header).each(function(){
        var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
        headings.Push(heading); // Add heading value to array
    });

    // Make sure the content is wrapped in a tbody element for proper syntax
    if(!$('tbody', table).length)
        table.wrapInner('<tbody></tbody>');

    // Set counter to reference the heading in the headings array
    var x = 0;

    // Loop through each row in the table
    $('tbody tr').each(function(){
        var row     = $(this),
            label   = headings[x];

        // Add the heading to the row, as a <th> for visual cues (default: bold)
        row.prepend('<th>'+label+'</th>')

        // Move to the next value in the headings value
        x++;
    });
});
0
davewoodhall
 <table>
     <tr><td>1</td></tr>
     <tr><td>2</td></tr>
     <tr><td>3</td></tr>
 </table>



 table { border-collapse: collapse; }
 table tr { display: block; float: left; }
 table tr tr{ display: block; float: left; }
 table th, table td { display: block; border: none; }
0
Nithiyakumar K