Making DIVs wie eine Tabelle mit CSS

In Ordnung, beim Entwerfen einer Website, stieß ich auf einen Gedanken ... Ich habe ein paar Teile meiner Website, die als Tabelle besser geeignet wäre, aber keine tabellarischen Daten . Aus irgendeinem Grund nervt es mich wirklich, eine Tabelle für etwas zu verwenden, das kein Tisch ist. Also habe ich die Anzeigeoptionen von CSS notiert, aber ich kann nicht richtig funktionieren. Hier ist was ich versuche. Was ist das Problem?Making DIVs wie eine Tabelle mit CSS

<div class="table"> 
    <div class="tr"> 
    <div class="td">Row 1, Cell 1</div> 
    <div class="td">Row 1, Cell 2</div> 
    <div class="td">Row 1, Cell 3</div> 
    </div> 
    <div class="tr"> 
    <div class="td">Row 2, Cell 1</div> 
    <div class="td">Row 2, Cell 2</div> 
    <div class="td">Row 2, Cell 3</div> 
    </div> 
</div>

So sieht das CSS aus.

div.table {border: 1px solid black; display: table; } 
div.tr {border: 1px solid black; display: table-row; } 
div.td {border: 1px solid black; display: table-cell; }

würde ich die Seite mag wie eine Tabelle verwendet wurde, zu sehen, aber die ‚Zellen‘ alle gehen auf eine neue Linie. Irgendwelche Gedanken?

Quelle

2010-11-23 Yoshiyahu

Funktioniert prima in Firefox 3.6.12. Welchen Browser benutzen Sie? –

sieht für mich wie Tabellendaten aus.Bitte erfinden Sie das Rad nicht mit divs und css Klassennamen neu, die Tabellenmarkierungen spiegeln – redsquare

@ redsquare- Das Rad neu zu erfinden ist meine Spezialität. – Yoshiyahu

Seltsam: Was Sie zitieren, sieht gut aus, und sollte funktionieren. Sind Sie sicher, dass es keinen zwingenden display: block !important irgendwo gibt?

Aber wie ich meine, werde ich sagen, dass für die Liebe Gottes, nur einen Tisch verwenden. :)

Ernsthaft. Das Hauptargument für die Verwendung von Tabellen in solchen Situationen ist, dass sie nicht das richtige Element semantisch sind. Aber mit Blick auf diese div-Suppe, müssen Sie zugeben, eine <table> ist die Art und Weise vorzuziehen Konstrukt, auch wenn es nicht genau Tabellendaten Sie angezeigt werden.

Quelle

2010-11-23 23:25:53

stimme ich voll und ganz zu. Immerhin habe ich Tabellen für das Design verwendet. Mit den Komplikationen, die mit den Tischen verbunden waren, wechselte ich zu DIVs. Ich mag es einfach nicht, Tabellen aus Stolz und einen Wunsch zu verwenden/korrigieren?/Dokumentation falsch zu verwenden. Ah ... Es scheint, dass ich die Seite in IE6 nacheiferte ... Funktioniert gut. – Yoshiyahu

@Yoshiyahu Ich sehe deinen Punkt und es ist generell eine gute Philosophie, mit zu arbeiten, aber in diesem Fall sieht das Markup, das in reinem CSS gemacht wird, schlechter aus und ist schwerer zu lesen als ein 'Tisch' IMO, also würde ich dazu neigen mache eine Ausnahme (auch weil ein natives Tabellenelement in IE6 funktioniert, während 'display- * 'nicht funktioniert) –

Punkt genommen. An dieser Stelle denke ich, stimme ich zu und benutze einen Tisch. Kleiner Hinweis: Meine Websites unterstützen IE6 nicht. Nicht umgekehrt. – Yoshiyahu

Es gibt einen Punkt, wo Sie sich fragen müssen "Ist es das wirklich wert?" Dies ist eine der Situationen, in denen das nicht der Fall ist.

Quelle

2010-11-23 23:25:41 simshaun

Vielleicht ein Browserproblem? Ihr Code funktioniert für mich in Chrome. Siehe hier:

Was benutzen Sie?

(aber ernsthaft, wie andere der genannten, verwenden Sie eine Tabelle)

Quelle

2010-11-23 23:26:14 Matt

Ja, ich habe es mit IE6 emuliert. Forgot to switch to Firefox ...:/ – Yoshiyahu

Welche Browser verwenden Sie? Diese Werte aren't implemented perfectly in allen Browsern. Immer noch, Was ist der Punkt von Versuchen, Tabellen mit Divs + CSS zu emulieren? Warum nicht einfach einen Tisch benutzen?

HTML-Ersteller vermeiden im Allgemeinen Tabellen für Daten, die nicht tabellarisch wegen der frühen (irgendwo in den letzten 10 Jahren? Kann mich nicht erinnern) Backlash, der von Überlastung von Tabellen als Layoutelemente ergab. Denken Sie an: verschachtelte Tabellen in verschachtelten Tabellen, leere Zellen nur zum Auffüllen, etc. Übersteigen Sie es. Verwenden Sie das Element, mit dem die Aufgabe erledigt wird.

Persönlich denke ich, dass table, table-row, table-cell usw. sollten aus dem CSS display spec gelassen wurden.

Quelle

2010-11-23 23:26:18

Ich weiß, dass dies ein alter Post ist, aber da niemand dein Problem mit den DIVs gelöst hat, dachte ich, ich würde es versuchen.

Ihr Problem ist einfach ... Ihre Zellenelemente sind divs und sind daher display: block, verwenden Sie stattdessen spans für Tabellenzellen (oder fügen Sie display: inline zum .cell CSS hinzu).

<div class="table"> 
    <div class="tr"> 
    <span class="td">Row 1, Cell 1</span> 
    <span class="td">Row 1, Cell 2</span> 
    <span class="td">Row 1, Cell 3</span> 
    </div> 
    <div class="tr"> 
    <span class="td">Row 2, Cell 1</span> 
    <span class="td">Row 2, Cell 2</span> 
    <span class="td">Row 2, Cell 3</span> 
    </div> 
</div>

Quelle

2012-09-28 06:08:34

Die divs für die .td-Klasse werden nicht angezeigt: block, noch werden Ihre Spannen mit der .td-Klasse angewendet display: inline, weil der Autor bereits die .td-Klasse setzt um anzuzeigen: Tabellenzelle –

<body> 
    <div style="display: table;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
      <div style="display: table-cell;">Row 1, Cell 1</div> 
     </div> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
      <div style="display: table-cell;">Row 2, Cell 1</div> 
     </div> 
    </div> 
</body>

Quelle

2013-08-06 14:13:16

Making DIVs wie eine Tabelle mit CSS

Antwort

Verwandte Themen