CSS- responsiewe tabel
Responsiewe tabel
'n Responsiewe tabel sal 'n horisontale rolbalk vertoon as die skerm te klein is om die volledige inhoud te vertoon:
Eerste naam | Van | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte | Punte |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Eva | 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 |
Voeg 'n houerelement (soos <div>) by met overflow-x:auto
rondom die <table>-element om dit reageer te maak:
Voorbeeld
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Let wel: In OS X Lion (op Mac), word rolbalke by verstek versteek en slegs gewys wanneer dit gebruik word (al is "oorloop: blaai" gestel).
Meer voorbeelde
Hierdie voorbeeld demonstreer hoe om 'n spoggerige tafel te skep.
Hierdie voorbeeld demonstreer hoe om die tabelbyskrif te plaas.
CSS-tabeleienskappe
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 |