HTML-табліца з вертыкальнымі шэрагамі

Як зрабіць вертыкальныя табліцы ў HTML? Па вертыкалі, я маю на ўвазе, што радкі будуць знаходзіцца ў вертыкальным становішчы са сталом загалоўкамі злева.

enter image description here

I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.

13

8 адказы

If you want <tr> to display columns, not rows, try this simple CSS

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

This should display what you want as far as you work with single-line cells (table behavior is dropped), see the fiddle.

52
дададзена
@naXa - выглядае, як вы атрымалі свой адказ у самыя кароткія тэрміны ;-)
дададзена аўтар Jan Turoň, крыніца
@naXa гэтак жа, я думаю, вы маглі б ўсталяваць Дысплей: блок; шырыня: что-то; перапаўненне: аўто для элемента табліцы, але вы павінны задаць асобнае пытанне, каб дапамагчы знайсці яго для тых, хто шукае адказ на яго.
дададзена аўтар Jan Turoň, крыніца
@totymedli, што варта заўважыць. Рашэнне можа быць, каб выдаліць верхнія і левыя мяжы ад усіх клетак, але першае ў шэрагу і Col: я: не (: першы-дзіця), тд: не (: першы-дзіця) ​​{пагранічнага-топ: 0 няма ; } Тр: не (: першы-дзіця) ​​-м, тр: не (: першы-дзіця) ​​{тд мяжы злева: 0 няма; }
дададзена аўтар Jan Turoň, крыніца
Проста пратэставалі яго ў IE11 і яна выдатна працуе. Калі ёсць якія-небудзь праблемы, апублікаваць спасылку.
дададзена аўтар Jan Turoň, крыніца
@Sean гэта сумна. IE ня быў v11 у той час я даў гэты адказ. І, здаецца, што тут не будзе доўга, Microsoft, магчыма, перайсці да Spartan. Для таго, каб выправіць паводзіны, вы можаце паспрабаваць ўсталяваць табліца, TBODY {дысплей: блок; }
дададзена аўтар Jan Turoň, крыніца
@ JanTuroň Вядома - тут . Але я баюся, што гэта будзе пытанне без адказу.
дададзена аўтар naXa, крыніца
Як зрабіць цела стала гарызантальна пракручваць?
дададзена аўтар naXa, крыніца
Майце на ўвазе, што гэтае рашэнне сапсуе функцыянальнасць пагранічнага калапсу.
дададзена аўтар totymedli, крыніца
Не працуе ў IE11 для мяне
дададзена аўтар Sean, крыніца
Гэта павінна быць, безумоўна, прынята адказваць +1
дададзена аўтар NOTACAT Studio, крыніца

David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html

<�Р> Хітрасць заключаецца ў тым, каб выкарыстоўваць Дысплей: убудаваны блок; на радках табліцы і   <�Код> бел-прастору :. Nowrap; на целе табліцы </р>
4
дададзена

паспрабуйце гэта

<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
дададзена
гэта нармальны гарызантальны стол
дададзена аўтар vishesh, крыніца
Вы проста размясцілі загалоўкі слупка і паплылі ўправа. Падобна на тое, няскончаная рашэнне.
дададзена аўтар totymedli, крыніца

Вы можаце выкарыстоўваць CSS пераўтварэнні для першага пераўтварэнні табліцы на 90 градусаў, а затым павярнуць тэкст у кожнай вочку на 90 градусаў.

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

Я не правяраў, хоць. Проста ідэя.

1
дададзена
ня working..only адно поля відаць пасля гэтага, што таксама паварочваецца 90degress.uploading малюнка ..
дададзена аўтар vishesh, крыніца
bing.com выкарыстоўвае табліцы і я паспрабаваў гэта на іх стале. Працаваў там. Хоць я зрабіў паварот (-90deg). Але да все зрабіў паварот.
дададзена аўтар Mukesh Soni, крыніца
змяніў мой адказ. Гэта павінна працаваць.
дададзена аўтар Mukesh Soni, крыніца
Dont вы думаеце, гэта будзе круціць поўную табліцу з тэкстам ўнутры яго, а таксама яго арыентацыі? (Няма негатывы ад мяне, хоць)
дададзена аўтар Nitesh, крыніца
Гэта павярнуць ўвесь тэкст у табліцы (толькі Chrome), які з'яўляецца не тое, што ОП хоча.
дададзена аўтар Glitch Desire, крыніца

Maybe this link won't help : rotate a table 90 degrees neither would this one : http://www.w3.org/TR/html401/struct/tables.html

У адваротным выпадку, вы можаце паспрабаваць гэта, прапанаваў іншы карыстальнік (абвергнутыя 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);
}

Гэта гучыць па-дурному, але эй, гэта не горш, чым проста не ведаючы «VERRY асноўнай» табліцы мадэль HTML 4.

1
дададзена
Ваш downvote для недарэчнага сарказму прымаецца. Але я не буду выдаляць гэта.
дададзена аўтар Milche Patern, крыніца
Гэта жудаснае рашэнне. Яна круціцца ўсё, нават тэкст. Пытанне просіць транспонированной ня для кручэння.
дададзена аўтар totymedli, крыніца

You can use <th> as the first cell in the row. Here's a fiddle: http://jsfiddle.net/w5nWG/


@vishesh so you want to transpose your table after DOM ready? try this 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
0
дададзена
см адрэдагаваны скрыпку jsfiddle.net/w5nWG/1 .Я не хачу гэтага
дададзена аўтар vishesh, крыніца
што зрабіў it.thanks
дададзена аўтар vishesh, крыніца
@vishesh так што вы хочаце перанесці табліцу пасля таго, як DOM гатовая? паспрабуйце гэта gist.github.com/pgaertig/2376975
дададзена аўтар sebastian, крыніца

AFAIK, няма ніякага чароўнага рашэння, каб пераключыць гэтую вакол. Што тычыцца кручэння (90deg), што, хутчэй за ўсё, ператварыць ўсю табліцу ў бок, падобна таму, як ліст паперы будзе выглядаць, калі вы звярнуліся ў 90 градусаў, і гэта не тое, што вы хочаце (я думаю?).

Калі гэта магчыма (і рэальных), я б прапанаваў змяніць яго ў самым HTML.


Як паказана ў каментарах, няма ніякіх намёкаў тут, так вось асноўная альтэрнатыва Javascript [нават калі гэта не тое, што вы шукалі] з дапамогай JQuery. Не ведаючы свой вопыт, я ўзяў час, каб пракаментаваць усе, каб пераканацца, што вы атрымаеце тое, што робіць код.

// 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
дададзена
@totymedli Я дадаў Фрагмент кода JavaScript для адказу на Ваш каментар; Аднак, я да гэтага часу не ў курсе варыянт CSS, каб павярнуць табліцу.
дададзена аўтар davewoodhall, крыніца
Гэта не дае адказу на пытанне. Толькі здагадка зроблена, што гэта відавочна не тое, што задае пытанне для.
дададзена аўтар totymedli, крыніца
 <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
дададзена