Parakstu pusē - CSS-triki

Anonim

caption-sideĪpašums CSS ļauj noteikt, kur novietot HTML s

elements, ko izmanto HTML tabulās. Šis īpašums var attiekties arī uz jebkuru elementu, kura displayīpašums ir iestatīts uz caption-side.

table ( caption-side: top; )

Vērtības

  • top: noklusējums. Parakstu novieto tabulas augšdaļā.
  • bottom: novieto parakstu tabulas apakšdaļā.
  • inherit: norāda, ka vērtība tiek mantota no caption-sidevecāku vērtības

caption-sideĪpašumu var piemērot vai nu uz


element or the

display table-caption text-align

Ņemiet vērā, ka iepriekš minētās vērtības attiecībā caption-sideuz tabulas rakstīšanas režīmu. Piemēram, ja tabula ir iestatīta uz vertikālu rakstīšanas režīmu, tad topun bottomvērtības būs saistītas ar tabulas virzienu.

Zemāk esošajā demonstrācijā ir poga “pārslēgt”, kas pārslēdz tabulas caption-siderekvizītu starp topun bottom, lai jūs varētu redzēt atšķirību, izmantojot tabulu ar daudzām datu rindām:

Skatiet
CSS-Tricks (@ css-tricks) parakstu puses rekvizīta Demo demonstrāciju
vietnē CodePen.

Nākamajā demonstrācijā writing-modetabulai ir iestatīta vērtība vertical-rl. Kā liecina pārslēgšana, izmantojot pogu, topun bottomvērtības ir saistītas ar tabulas rakstīšanas režīmu:

Skatiet
CSS-Tricks (@ css-tricks)
CSP -Tricks (@ css-tricks) parakstu puses rekvizīta Pen Demo parakstu ar dažādu rakstīšanas režīmu .

Nestandarta tikai Firefox vērtības

Firefox jau sen atbalsta un joprojām atbalsta četras nestandarta vērtības caption-side:

  • left: novieto parakstu tabulas kreisajā pusē.
  • right: novieto parakstu tabulas labajā pusē.
  • top-outside: novieto parakstu tabulas augšdaļā, tā izmēri nav atkarīgi no tabulas
  • bottom-outside: novieto parakstu tabulas apakšdaļā, tā izmēri nav atkarīgi no tabulas

Tālāk sniegtā demonstrācija darbojas tikai pārlūkprogrammā Firefox un ļauj izmantot četras pogas, lai iestatītu dažādas nestandarta vērtības:

Skatiet
CSS-Tricks (@ css-tricks)
CSP -Tricks ( tikai CSR -Tricks) tikai Firefox paredzēto īpašību demonstrāciju.

Jaunas standarta vērtības

Ar jaunāko projektu par CSS specifikācijai, tad caption-sideīpašums ir daļa no CSS Loģiskā Properties Level 1 un ietver vērtības block-start, block-end, inline-start, un inline-end. Divas pēdējās atbilst nestandarta leftun rightvērtībām, un tās ir jāatbalsta tikai lietotāju aģentiem, kas atbalsta šīs nestandarta vērtības.

Vairāk informācijas

  • parakstu puses rekvizīts CSS2.1 spec
  • parakstu puses rekvizīts CSS2.2 spec
  • CSS loģisko rekvizītu 1. parakstu puse

Pārlūka atbalsts

ar tādu pašu efektu. Lai gan šis rekvizīts ietekmēs parakstu lodziņa stāvokli kopumā (paraksta vērtība tiek aprēķināta pēc), tas neietekmēs teksta izlīdzināšanu lodziņā. Teksts lodziņā var tikt izlīdzināts, izmantojot rekvizītu.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Atbalsts iepriekš tabulā attiecas uz pamata atbalstu standartam topun bottomvērtībām. Firefox arī papildus atbalsta nestandarta left, right, top-outside, un bottom-outsidevērtības. Nav pārlūku atbalsts jaunajiem block-start, block-end, inline-start, un inline-endvērtībām.