So erstellen Sie eine Tabelle nur mit dem <div> -Tag und Css

182

Ich möchte eine Tabelle nur mit <div>Tag und CSS erstellen .

Dies ist meine Beispieltabelle.

<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>

Und Stil:

<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>

Diese Tabelle funktioniert jedoch nicht mit IE7 und einer niedrigeren Version. Bitte geben Sie Ihre Lösung und Ideen für mich an. Vielen Dank.

html css Kumara
quelle
Werfen
32
Warum möchten Sie diveine Tabelle erstellen?
Huy
3
Siehe guten Artikel "Sind CSS-Tabellen besser als HTML-Tabellen?" [ vanseodesign.com/css/tables/]
Vladimir
5
Ich denke, der Grund, warum jemand eine div-basierte Tabelle anstelle einer normalen Tabelle verwenden möchte, ist, dass ... das Rendern / Animieren / Reflows auf einer div-basierten Tabelle tatsächlich schneller ist (insbesondere bei großen DOM-Größen) als das Rendern einer normalen Tabelle. ..... siehe dazu .... stubbornella.org/content/2009/03/27/… this .... developer.nokia.com/community/wiki/… darüber hinaus alle datenintensiven Javascript-Plugins wie slickgrid usw. benutze divBasedtable
bhavya_w
1
@huy Wahrscheinlich , weil divs mehr sind flex können als Tabellen!
Kai Noack

Antworten:

261 
.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;  
}

Runnable Snippet:

Code-Snippet anzeigen

Shiva Komuravelly
quelle
223
Danke dir! Jemand, der seine Frage tatsächlich beantwortet hat und nicht nur sagt: "Das ist eine blöde Idee." Ich hasse es, wenn Leute die Fragen nicht beantworten ... Wenn er es gestellt hat, sollte es beantwortet werden
Brian Leishman
23
@stumpx: Manchmal lautet die richtige Antwort "Tu das nicht". Dies ist eine dieser Zeiten. Wenn Sie fragen müssen, wie ich eine Tabelle mit Divs und CSS erstellen kann, haben Sie eines von zwei Problemen: Entweder stellen Sie die falsche Frage oder Sie versuchen, das Falsche zu tun.
CHao
28
@cHao Wenn Sie der Meinung sind, dass dies die Antwort sein sollte, ignorieren Sie sie und lassen Sie sie von jemandem beantworten, der die Frage tatsächlich beantworten möchte.
Brian Leishman
14
@stumpx: Wenn ich denke, dass die Frage nicht beantwortet werden sollte , stimme ich zum Schließen - weil die Frage nicht einmal existieren sollte. Alle gültigen Fragen verdienen eine Antwort. Aber wie gesagt, manchmal ist die richtigste Antwort "Tu es nicht". Ist es gut, jemanden zu beraten, wie man das falsche Problem löst? Ist es gut, untätig zu bleiben, während andere solche Ratschläge geben? Ich sage nein.
CHao
5
Wenn Sie nicht wissen, was Ihr Designer im Kopf hat, ist es viel besser, Daten in der Div-Struktur wie oben zu belassen, als sie in der Tabelle zu belassen. Besser bedeutet, dass es einfacher ist, von schwebenden Divs in Tabellen zu konvertieren, die umgekehrt sind.
Anatoly Techtonik
96

divs sollte nicht für tabellarische Daten verwendet werden. Das ist genauso falsch wie die Verwendung von Tabellen für das Layout.
Verwenden Sie a <table>. Es ist einfach, semantisch korrekt und Sie sind in 5 Minuten fertig.

Kobi
quelle
8
kann jedoch von der Anwendung abhängen. manchmal kann das, was tabellarisch erscheint, linear sein, obwohl es geteilt ist. Zum Beispiel können Kalender ihre Vorteile als Divs anstelle von Tabellen haben
Dan
2
@Dann: Sie haben vielleicht Vorteile als Liste , aber eine Reihe von Divs ist semantisch genauso schlecht wie eine Layout-Tabelle.
CHao
4
Es gibt mehrere Gründe, warum wir darum bitten, dass die Tabelle nicht mit DIVs übereinstimmt. Eine davon ist die Verwendung von Tabellen-Tags in SharePoint 2007, um alle Inhalte auf der Seite
durcheinander zu bringen
2
@simplyletgo: Semantisch wäre es besser, die Tabellenzellen als Blöcke zu formatieren, als zu versuchen, divs wie eine Tabelle zu verhalten.
CHao
1
warum nicht? Wenn Sie Tabellen verwenden, können Sie bestimmte Zellen nicht mit einer Bildlaufleiste versehen, sodass Ihre Tabelle beispielsweise über Excel-ähnliche gesperrte Überschriften verfügt. Tabellen haben viele Einschränkungen. Warum kann dies nicht mit divs durchgeführt werden?
Pilavdzice
9

Dies ist ein alter Thread, aber ich dachte, ich sollte meine Lösung veröffentlichen. Ich hatte kürzlich das gleiche Problem und habe es gelöst, indem ich einen dreistufigen Ansatz wie unten beschrieben verfolgt habe, der ohne komplexes CSS sehr einfach ist .

(HINWEIS: Für moderne Browser würde die Verwendung der Werte von Tabelle oder Tabellenzeile oder Tabellenzelle für die Anzeige des CSS-Attributs das Problem natürlich lösen. Der von mir verwendete Ansatz funktioniert jedoch in modernen und älteren Browsern gleich gut, da dies nicht der Fall ist Verwenden Sie diese Werte für die Anzeige des CSS-Attributs.)

3-SCHRITT EINFACHER ANSATZ

Verwenden Sie für Tabellen nur mit Divs den folgenden Ansatz, damit Sie Zellen und Zeilen wie in einem Tabellenelement erhalten.

  1. Ersetzen Sie das Tabellenelement durch einen Block div (verwenden Sie eine .tableKlasse)
  2. Ersetzen Sie jedes tr- oder th-Element durch einen Block div (verwenden Sie eine .rowKlasse)
  3. Ersetzen Sie jedes td-Element durch einen Inline-Block div (verwenden Sie eine .cellKlasse)

.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>
Erweitern Sie das Snippet

UPDATE 1

Um den Effekt zu umgehen, dass die gleiche Breite nicht in allen Zellen einer Spalte beibehalten wird, wie thatslchin einem Kommentar erwähnt, könnte man einen der beiden folgenden Ansätze anwenden.

  • Geben Sie eine Breite für die cellKlasse an

    Zelle {Anzeige: Inline-Block; Breite: 340px;}

  • Verwenden Sie das CSS moderner Browser wie folgt.

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

Sunil
quelle
1
Dies ist nicht möglich, da die Spalten nicht dieselbe Größe haben.
Das ist der
Sie haben Recht mit der Breite, die sich nicht wie in einem Tabellenelement verhält. Wenn Sie jedoch eine Breite für die .cell-Klasse in ihrem CSS wie .cell {width: 300px;} angeben, können Sie einen ähnlichen Effekt erzielen. Die von Ihnen erwähnte Einschränkung bleibt jedoch bei der Verwendung von div immer bestehen, es sei denn, Sie definieren eine Breite für die Zellen-CSS-Klasse. Eine andere Möglichkeit, den gleichen Effekt zu erzielen, besteht darin, die folgenden Klassen zu verwenden: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </ style> anstatt die in der obigen Antwort genannten Klassen zu verwenden.
Sunil
@thatsIch, ich habe UPDATE 1 in meiner Antwort hinzugefügt, die die Problemumgehung für das von Ihnen erwähnte Problem mit der Breite erklärt
Sunil
4

Wenn <table>Ihnen etwas nicht gefällt, können Sie möglicherweise die Datei zurücksetzen ?

oder

Wenn Sie dies für das Layout der Seite benötigen, lesen Sie die Beispiele für das CSSplay-Layout zum Entwerfen von Websites ohne Tabellen.

Urszula Karzelek
quelle
2

Verwenden Sie den richtigen Dokumenttyp. es wird das Problem lösen. Fügen Sie die folgende Zeile oben in Ihre HTML-Datei ein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
A B C D
quelle
2

Ein bisschen OFF-TOPIC, kann aber jemandem für ein saubereres HTML helfen ... 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>

Funktioniert unter Chrome und Firefox

Harijs Krūtainis
quelle
2
Und wenn Ihre Tabellenzellen <div>Elemente enthalten? Sie wollen wahrscheinlich.common_table div > div
Vol7ron
2

Beim Erstellen eines benutzerdefinierten Satzes von Layout-Tags habe ich eine andere Antwort auf dieses Problem gefunden. Hier finden Sie die benutzerdefinierten Tags und ihre CSS-Klassen.

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 }

Der Schlüssel, um leere Zellen und Zellen im Allgemeinen auf die richtige Größe zu bringen, ist Box-Sizing und Padding. Border macht das Gleiche, erstellt jedoch eine Linie in der Zeile. Polsterung nicht. Und obwohl ich es noch nicht ausprobiert habe, denke ich, dass Margin genauso wie Padding agieren wird, indem erzwingt und leert, dass die Zelle richtig gerendert wird.

E Net Arch
quelle