Tableau HTML avec des lignes verticales

Vous pouvez utiliser <th> que la première cellule de la ligne.
Voici un violon: http://jsfiddle.net/w5nWG/

@vishesh si vous souhaitez transposer votre table après DOM prêt? essayez cette 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();
}

OriginalL'auteur sebastian

David Bushell a fourni une solution et la mise en œuvre ici: http://dbushell.com/demos/tables/rt_05-01-12.html

L'astuce est d'utiliser display: inline-block; sur les lignes de la table et
white-space: nowrap; sur le corps de table.

OriginalL'auteur Pratyush

Autant que je sache, il n'y a pas de solution magique pour changer ceci.
Comme pour une rotation(90deg), qui serait le plus susceptible de tourner l'ensemble de la table sur le côté, de la même manière qu'une feuille de papier ressemblerait si vous avez tourné de 90 degrés, et ce n'est pas ce que vous voulez (je crois?).

Si c'est possible (et réaliste), je suggère de le changer dans le code HTML lui-même.

Comme indiqué dans les commentaires, il n'y a pas de suggestion ici, donc voici un code javascript de base alternative [même si ce n'est pas ce que vous cherchez] à l'aide de jQuery. Sans connaître votre expérience, j'ai pris le temps de commenter tout pour être sûr que vous obtenez ce que fait le code.

//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++;
    });
});

OriginalL'auteur davewoodhall

Peut-être que ce lien ne vous aidera pas : faire pivoter une table de 90 degrés
ni celui-ci : http://www.w3.org/TR/html401/struct/tables.html

Sinon, vous pouvez essayer ce, a un autre utilisateur a suggéré (rejeté et downvoted) :

table {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Cela semble idiot, mais bon, c'est pas pire que de ne pas savoir juste le "très basique" HTML 4 modèle de table.

OriginalL'auteur Milche Patern