Jak utworzyć tabelę tylko za pomocą znacznika <div> i Css

182

Chcę utworzyć tabelę tylko przy użyciu <div>tagu i CSS.

To jest moja przykładowa tabela.

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

I styl:

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

Ale ta tabela nie działa z IE7 i wersjami niższymi. Proszę podać swoje rozwiązanie i pomysły dla mnie. Dzięki.

html  css 
— Kumara
źródło
spójrz na ten artykuł
— tanathos
32
dlaczego chcesz użyć divdo stworzenia stołu?
— huy
3
zobacz dobry artykuł „Czy tabele CSS są lepsze niż tabele HTML?” [ vanseodesign.com/css/tables/]
— vladimir
5
Myślę, że powodem, dla którego ktoś chce użyć tabeli opartej na div zamiast normalnej, jest to, że .... renderowanie / animacje / reflows na stole opartym na div jest w rzeczywistości szybsze (szczególnie dla dużych rozmiarów DOM) niż renderowanie normalnego stołu. ..... zobacz to .... stubbornella.org/content/2009/03/27/ ... to .... developer.nokia.com/community/wiki/ ... powyżej wszystkie wtyczki javascript wymagające dużej ilości danych, takie jak slickgrid itp. użyj divBasedtable
— bhavya_w
1
@huy Prawdopodobnie dlatego, divże są bardziej elastyczni niż stoły!
— Kai Noack,

Odpowiedzi:

262 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Urywalny fragment kodu:

Pokaż fragment kodu

— Shiva Komuravelly
źródło
224
Dziękuję Ci! Ktoś, kto faktycznie odpowiedział na jego pytanie, a nie tylko powiedział, że „to głupi pomysł”. Nienawidzę tego, gdy ludzie nie odpowiadają na pytania ... Jeśli zadałby to pytanie, należy na nie odpowiedzieć
— Brian Leishman,
23
@stumpx: Czasami poprawną odpowiedzią jest „nie rób tego”. To jest jeden z tych czasów. Kiedy musisz zapytać „jak zrobić tabelę przy użyciu div i CSS”, masz jeden z dwóch problemów: albo zadajesz złe pytanie, albo próbujesz zrobić coś złego.
— cHao
28
@ cHao Jeśli uważasz, że powinna to być odpowiedź, zignoruj ​​ją i pozwól, aby ktoś, kto naprawdę chce odpowiedzieć na pytanie, udzielił na nią odpowiedzi.
— Brian Leishman
14
@stumpx: Jeśli uważam, że na pytanie nie należy odpowiedzieć , głosuję za jego zamknięciem - ponieważ pytanie nie powinno nawet istnieć. Wszystkie ważne pytania zasługują na odpowiedź. Ale jak powiedziałem, czasami najbardziej poprawną odpowiedzią jest „nie rób tego”. Czy dobrze jest doradzić komuś, jak rozwiązać niewłaściwy problem? Czy dobrze jest pozostać bezczynnie, podczas gdy inni oferują takie porady? Mówię nie.
— cHao
5
Jeśli nie wiesz, co projektant ma w głowie, pozostawienie danych w strukturze div, jak w powyższym, jest znacznie lepsze niż pozostawienie ich w tabeli. Lepsze oznacza, że ​​łatwiej jest przekonwertować zmienne div na tabele odwrotnie.
— anatoly techtonik
96

divnie należy używać do danych tabelarycznych. Jest to tak samo złe, jak używanie tabel do układu.
Użyj a <table>. Jest to łatwe, semantycznie poprawne, a skończysz za 5 minut.

— Kobi
źródło
8
może jednak zależeć od aplikacji. czasami to, co wydaje się tabelaryczne, może być liniowe, chociaż podzielone. Na przykład kalendarze mogą mieć swoje zalety jako tabele div zamiast tabel
— Dan
2
@Dann: Mogą mieć zalety w postaci listy , ale paczka div jest semantycznie tak samo zła jak tabela układów.
— cHao
4
istnieje kilka powodów, dla których prosimy o niezgodność tabeli z DIV. Jednym z nich jest użycie znacznika tabeli w SharePoint 2007, który przechwytuje wszystkie treści znajdujące się na stronie
— Shiva Komuravelly,
2
@simplyletgo: Semantycznie właściwsze byłoby stylizowanie komórek tabeli jako bloków niż próbowanie, aby div działał jak tabela.
— cHao
1
Dlaczego nie? jeśli używasz tabel, nie możesz dodać paska przewijania wokół niektórych komórek, aby na przykład tabela miała zamknięte nagłówki podobne do programu Excel. Tabele mają wiele ograniczeń, dlaczego nie można tego zrobić z divami?
— pilavdzice
9

To jest stary wątek, ale pomyślałem, że powinienem opublikować swoje rozwiązanie. Ostatnio spotkałem się z tym samym problemem, a sposób, w jaki go rozwiązałem, polega na zastosowaniu trzyetapowego podejścia opisanego poniżej, które jest bardzo proste bez skomplikowanego CSS .

(UWAGA: Oczywiście w przypadku nowoczesnych przeglądarek użycie wartości tabeli lub wiersza tabeli lub komórki tabeli do wyświetlania atrybutu CSS rozwiązałoby problem. Ale zastosowane przeze mnie podejście będzie działać równie dobrze w nowoczesnych i starszych przeglądarkach, ponieważ nie użyj tych wartości do wyświetlenia atrybutu CSS).

3-KROKOWE PROSTE PODEJŚCIE

Tylko w przypadku tabeli z div, aby uzyskać komórki i wiersze, podobnie jak w elemencie tabeli, zastosuj następujące podejście.

  1. Zamień element tabeli na blok div (użyj .tableklasy)
  2. Zamień każdy element tr lub th na div bloku (użyj .rowklasy)
  3. Zastąp każdy element td wbudowanym blokiem div (użyj .cellklasy)

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>
Rozwiń fragment kodu

AKTUALIZACJA 1

Aby obejść efekt braku utrzymywania tej samej szerokości we wszystkich komórkach kolumny, jak wspomniano thatslchw komentarzu, można zastosować jedno z dwóch poniższych podejść.

  • Określ szerokość dla cellklasy

    cell {display: blok wbudowany; szerokość: 340px;}

  • Użyj CSS nowoczesnych przeglądarek jak poniżej.

    .table {display: table; } .row {display: table-row;} .cell {display: table-cell;}

— Sunil
źródło
1
Nie zrobi tego, ponieważ kolumny nie są tego samego rozmiaru.
— to jest
Masz rację, jeśli chodzi o szerokość, która nie zachowuje się tak jak w elemencie tabeli. Jeśli jednak określisz szerokość dla klasy .cell w jej CSS, takim jak .cell {width: 300px;}, możesz osiągnąć podobny efekt. Ale ograniczenie, o którym wspomniałeś, zawsze będzie istniało podczas używania div, chyba że zdefiniujesz szerokość dla klasy CSS komórki. KOLEJNYM sposobem uzyskania tego samego efektu byłoby użycie następujących klas: <styl> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> zamiast korzystać z klas wymienionych w powyższej odpowiedzi.
— Sunil
@thatsIch, dodałem UPDATE 1 w mojej odpowiedzi, która wyjaśnia obejście problemu dotyczącego szerokości, o którym wspomniałeś
— Sunil
2

Użyj poprawnego typu dokumentu; rozwiąże problem. Dodaj poniższy wiersz na górze pliku HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— abcd
źródło
2

Trochę POZA TEMATEM, ale może pomóc komuś w czyszczeniu HTML ... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

Działa w Chrome i Firefox

— Harijs Krūtainis
źródło
2
A jeśli w komórkach tabeli znajdują się <div>elementy? Prawdopodobnie chcesz.common_table div > div
— vol7ron,
2

Budując niestandardowy zestaw tagów układu, znalazłem inną odpowiedź na ten problem. Podano tutaj niestandardowy zestaw tagów i ich klas CSS.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

Kluczem do uzyskania pustych komórek i ogólnie komórek o odpowiednim rozmiarze są rozmiary i wypełnianie pudełek. Obramowanie zrobi to samo, ale tworzy linię w rzędzie. Padding nie. I chociaż tego nie próbowałem, myślę, że Margin będzie działać tak samo jak Padding, zmuszając i pustą komórkę do poprawnego renderowania.

— E Arch Arch
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.