Met de caption-sideeigenschap in CSS kunt u bepalen waar HTML's moeten worden geplaatst
element, gebruikt op HTML-tabellen. Deze eigenschap kan ook van toepassing zijn op elk element waarvan de displayeigenschap is ingesteld op caption-side.
table ( caption-side: top; )Waarden
top: de standaard. Plaatst het bijschrift bovenaan de tafel.bottom: plaatst het bijschrift onderaan de tabel.inherit: geeft aan dat de waarde wordt geërfd van decaption-sidewaarde van de bovenliggende waarde
De caption-sideeigenschap kan worden toegepast op de
element or the
display table-caption text-align
Merk op dat de bovenstaande waarden caption-siderelatief zijn ten opzichte van de schrijfmodus van de tabel. Bijvoorbeeld, wanneer een tabel is ingesteld op een verticale schrijfmodus, dan topen bottomwaarden ten opzichte van de richting van de tafel.
De onderstaande demo bevat een "schakelknop" die de caption-sideeigenschap van de tabel schakelt tussen topen bottom, zodat u het verschil kunt zien aan de hand van een tabel met veel rijen gegevens:
Zie de Pen
Demo van de eigenschap caption-side door CSS-Tricks (@ css-tricks)
op CodePen.
In de volgende demo is de writing-modefor the table ingesteld op vertical-rl. Zoals aangetoond door te schakelen met de knop, de topen bottomwaarden zijn gerelateerd aan het schrijven-modus van de tabel:
Zie de Pen
Demo van de eigenschap caption-side met verschillende schrijfmodi door CSS-Tricks (@ css-tricks)
op CodePen.
Niet-standaard Firefox-waarden
Firefox ondersteunt al lang vier niet-standaardwaarden voor caption-side:
left: plaatst het bijschrift links van de tafel.right: plaatst het bijschrift rechts van de tabel.top-outside: plaatst het bijschrift bovenaan de tafel, met zijn afmetingen onafhankelijk van de tafelbottom-outside: plaatst het bijschrift onderaan de tafel, met zijn afmetingen onafhankelijk van de tafel
De onderstaande demo werkt alleen in Firefox en stelt u in staat om vier knoppen te gebruiken om de verschillende niet-standaard waarden in te stellen:
Zie de Pen
Firefox-only demo van de eigenschap caption-side door CSS-Tricks (@ css-tricks)
op CodePen.
Nieuwe standaardwaarden
In de nieuwste ontwerpen van de CSS-specificatie, het caption-sidepand is onderdeel van CSS Logische Properties Level 1 en omvat de waarden block-start, block-end, inline-start, en inline-end. De laatste twee komen overeen met de niet-standaard leften rightwaarden, en hoeven alleen te worden ondersteund door user agents die deze niet-standaard waarden ondersteunen.
Meer informatie
- caption-side eigenschap in CSS2.1 spec
- caption-side eigenschap in CSS2.2-specificatie
- caption-side in CSS Logical Properties 1
Browser-ondersteuning
element, met hetzelfde effect. Hoewel deze eigenschap de positie van het bijschriftvak als geheel beïnvloedt (de waarde van een bijschrift wordt berekend naar), heeft het geen invloed op de uitlijning van de tekst in het vak. Tekst in het vak kan worden uitgelijnd met behulp van de eigenschap.| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
Ondersteuning in bovenstaande tabel verwijst naar basisondersteuning voor de norm topen bottomwaarden. Firefox ondersteunt bovendien de afwijkende left, right, top-outsideen bottom-outsidewaarden. Er is geen browser ondersteuning voor de nieuwe block-start, block-end, inline-start, en inline-endwaarden.