Tableau HTML avec lignes verticales

Comment faire des tables verticales en HTML? Par vertical, je veux dire que les lignes seront verticales avec des en-têtes de table à gauche.

enter image description here

j'en ai aussi besoin pour accéder à ces lignes (dans ce cas-ci verticales) comme dans une table normale, avec <tr> . C'est parce que je reçois les données dynamiquement pour une rangée (comme pour la rangée A) et l'insère dans le tableau. J'utilise angularJS pour éviter la manipulation de DOM, donc je ne regarde pas pour la manipulation complexe de DOM avec Javascript.

13
demandé sur dda 2013-06-04 16:39:08

8 réponses

vous pouvez utiliser <th> comme première case dans la rangée. Voici un violon: http://jsfiddle.net/w5nWG /


@vishesh donc tu veux transposer ta table après DOM prêt? essayez ce 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
répondu sebastian 2014-04-08 16:38:18

si vous voulez que <tr> affiche des colonnes, pas des rangées, essayez ce simple CSS

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

cela devrait afficher ce que vous voulez dans la mesure où vous travaillez avec des cellules mono-ligne (le comportement de table est abandonné), voir le violon .

55
répondu Jan Turoň 2013-06-04 13:39:59

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

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

4
répondu Pratyush 2015-04-22 13:16:52
 <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
répondu Nithiyakumar K 2016-06-13 11:01:46

AFAIK, il n'y a pas de solution magique pour changer cela. Comme pour une rotation (90deg), qui serait très probablement tourner la table entière sur le côté, semblable à la façon dont une feuille de papier ressemblerait si vous tourniez dans 90 degrés, et ce n'est pas ce que vous voulez (je pense?).

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


comme indiqué dans les commentaires, il n'y a pas de suggestion ici, donc voici une alternative javascript de base [même si ce n'est pas ce que vous cherchiez] en utilisant 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++;
    });
});
0
répondu davewoodhall 2016-10-24 02:13:27

essayez cette

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
      <th>column5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

css:

table, td, th {
  border: 1px solid red;   
}

thead {
  float: left;   
}


thead th {
  display: block;   
  background: yellow;
}

tbody {
  float: right;   
}
-1
répondu learner 2013-06-04 13:03:06

peut-être que ce lien n'aidera pas: tourner une table 90 degrés ni celle - ci: http://www.w3.org/TR/html401/struct/tables.html

sinon, vous pouvez essayer ceci, un autre utilisateur a suggéré (rejeté et rétrogradé):

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 stupide, mais bon, ce n'est pas pire que de ne pas connaître le modèle de table 'verry basic' HTML 4.

-1
répondu Milche Patern 2017-05-23 10:31:06

Vous pouvez utiliser les css transforme transformer d'abord le tableau de 90 degrés, puis faites pivoter le texte à l'intérieur de chaque cellule de 90 degrés.

table {
   position: absolute;

   /* Webkit */
   -webkit-transform: rotate(90deg);
   /* Firefox */
   -moz-transform: rotate(90deg);

   /* IE */
   -ms-transform: rotate(90deg);

   /* Opera */
   -o-transform: rotate(90deg);

   top: 100px; /* adjust as per your need */
}

table > tr > td > span.table-text {
    -webkit-transform: rotate(-90deg);
}

je ne l'ai pas testé. Juste une idée.

-1
répondu Mukesh Soni 2015-02-24 14:43:21