Feste Tabelle Layouts, CSS-Tricks
Es gibt eine CSS-Eigenschaft für Tabellen, die, so scheint es mir, ist gut unterstützt, wenig bekannt, und super nützlich. Es verändert die Art und Weise, die Tabellen so gemacht werden, dass es Ihnen ein robustere, berechenbares Layout gibt.
Die Standardeigenschaft für Tisch-Layout ist auto. und das ist das Tabellenlayout ich die meisten von uns denken, kennen. Dieser Stil ist für mich fühlt sich schwammig und seltsam. Hier ist eine Exploration:
Mit Tisch-Layout: fixed;
Die Dinge werden viel robusteren und besser vorhersagbar mit Eigenschaft / Wert an seinem Platz.
Das Layout wird auf der Grundlage der ersten Reihe befestigt. Legen Sie die Breite von denen, und der Rest der Tabelle folgt.
Es ist ein wenig komplizierter, aber nicht viel. Hier ist eine Exploration:
Ich dies erforscht, weil ich eine einheitliche Zeilenhöhe für Pens in der Listenansicht auf CodePen zu halten versuche, (das heißt nicht Pen Titel wickeln), sondern auch nicht die Breite des Tisches ausblasen. Das hat super funktioniert.
Ich stelle mir die meisten von Ihnen wissen: Tabellen sind für tabellarische Daten und E-Mails. Nicht Web-Layout, weil Gründe.
Praktische HTML und CSS
Ich stelle mir die meisten Anwendungen wird so sein:
Für eine gute Maßnahme wissen, dass Sie die verwenden können
Layout Geschwindigkeit
Ich habe gehört, dass diese Art des Tabellenlayouts schneller als gut ist, was zur Vernunft steht, weil der Inhalt der gesamten Tabelle nicht analysiert werden muß, wissen, wie groß die Spaltenbreiten sein werden. Ich habe keine Daten auf diesem though.
Kampagne Montior Unterstützung Diagramm für CSS in E-Mail-Clients zeigt Tabelle-Layout wie auf der ganzen Linie unterstützt.
- Viel mehr Informationen über
s
- Tisch-Layout auf MDN. Fügen Sie Browser-Unterstützung, die im Grunde zu allgegenwärtigen beträgt.
Follow Up Tweets
Vielen Dank. Ich habe so oft verbrannt mit Tabellenlayout in CSS „statt“ der herkömmlichen HTML-Tabellen-Layouts, die ich schließlich aufgegeben und mit den HTML-Sachen ganz fest. Es ist Artikel wie Ihre, die allgemeinen Wortschwall nicht verwenden, ohne etwas Konkretes zu sagen und nützlich, dass ich es durch „CSS-Reha“ machen muß. Mein Problem ist, dass ich eine Menge von Legace XLS und ODT Tabellen / Datenbanken mit vielen Material, dass ich wollte, um online gehen und jedes Mal, wenn ich versuchte, es kam auseinander „an den Nähten“.
In Verbindung stehende Artikel