Responsive CSS -Tabelle
Responsive Tabelle
Eine responsive Tabelle zeigt eine horizontale Bildlaufleiste an, wenn der Bildschirm zu klein ist, um den gesamten Inhalt anzuzeigen:
Vorname | Nachname | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Schmied | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Vorabend | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Fügen Sie ein Containerelement (wie <div>) overflow-x:auto
um das <table>-Element herum hinzu, um es reaktionsfähig zu machen:
Beispiel
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Hinweis: In OS X Lion (auf Mac) sind Bildlaufleisten standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (auch wenn „overflow:scroll“ eingestellt ist).
Mehr Beispiele
Dieses Beispiel zeigt, wie eine ausgefallene Tabelle erstellt wird.
Dieses Beispiel zeigt, wie die Tabellenbeschriftung positioniert wird.
CSS-Tabelleneigenschaften
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |