Tabulas izkārtojums - CSS-triki

Par table-layoutīpašuma nosaka, kas algoritms pārlūkprogrammā vajadzētu izmantot, lai nolikt tabulas rindas, šūnas, un kolonnas.

table ( table-layout: fixed; )

Kā paskaidrots CSS2.1 specifikācijā, galda izkārtojums parasti ir gaumes jautājums un mainīsies atkarībā no dizaina izvēles. Tomēr pārlūkprogrammas automātiski piemēros noteiktus ierobežojumus, kas noteiks tabulu izkārtojumu. Tas notiek, ja table-layoutīpašums ir iestatīts uz auto(noklusējums). Bet šos ierobežojumus var atcelt, kad tas table-layoutir iestatīts uz fixed.

Vērtības

auto: noklusējums. Pārlūkprogrammas automātiskais algoritms tiek izmantots, lai noteiktu, kā tabulas rindas, šūnas un kolonnas tiek izkārtotas. Rezultātā iegūtais tabulas izkārtojums parasti ir atkarīgs no tabulas satura.
fixed: Izmantojot šo vērtību, tabulas izkārtojums ignorē saturu un tā vietā izmanto tabulas platumu, jebkuru norādīto kolonnu platumu un robežu un šūnu atstarpes vērtības. Izmantoto kolonnu vērtības ir balstītas uz platumiem, kas noteikti kolonnās vai šūnās tabulas pirmajai rindai.
inherit: norāda, ka vērtība tiek mantota no table-layoutvecāku vērtības

Lai vērtībai fixedbūtu kāda ietekme, tabulas platumam jābūt iestatītam uz kaut ko citu, nevis auto( widthrekvizīta noklusējums ). Zemāk redzamajās demonstrācijās visi tabulas platumi ir iestatīti uz 100%, kas nozīmē, ka mēs vēlamies, lai tabula aizpildītu vecāku konteineru horizontāli.

Labākais veids, kā redzēt fiksētā tabulas izkārtojuma algoritma sekas, ir demonstrācijas izmantošana.

Skatiet Louis Lazaris (@impressivewebs) CSS tabulas izkārtojuma rekvizītu Pen Demo vietnē CodePen.

Pirmo reizi apskatot iepriekšējo demonstrāciju, pamanīsit, ka tabulas kolonnu izkārtojums nav līdzsvarots un neērts. Tajā brīdī tabula izmanto pārlūkprogrammas noklusējuma algoritmu, lai noteiktu, kā izkārtot tabulu, kas nozīmē, ka saturs diktēs izkārtojumu. Demonstrācija pārspīlē šo faktu, vienā tabulas šūnā iekļaujot garu teksta virkni, savukārt visās pārējās tabulas šūnās tiek izmantoti tikai divi vārdi. Kā redzat, pārlūks paplašina pirmo kolonnu, lai tajā ietilptu lielāks satura bits.

Noklikšķinot uz pogas Pārslēgt tabulas izkārtojumu: fiksēts, jūs redzēsiet, kā izskatās tabulas izkārtojums, kad tiek izmantots fiksētais algoritms. Kad tas table-layout: fixedtiek lietots, saturs vairs nediktē izkārtojumu, bet pārlūks kolonnu platumu noteikšanai izmanto visus definētos platumus no tabulas pirmās rindas. Ja pirmajā rindā nav platumu, kolonnu platumi tiek vienādi sadalīti pa visu tabulu neatkarīgi no satura šūnās.

Citi piemēri var palīdzēt to padarīt skaidrāku. Šajā demonstrācijā tabulā ir elements, kura pirmā elementa platums ir 400px. Šajā gadījumā ņemiet vērā, ka pārslēgšanai table-layout: fixednav ietekmes.

Skatiet Louis Lazaris (@impressivewebs) CSS tabulas izkārtojuma rekvizītu Pen Demo vietnē CodePen.

Tas notiek tāpēc, ka noklusējuma izkārtojuma algoritms būtībā saka “izveidojiet pirmo kolonnu 400 pikseļu platumā un sadaliet pārējās kolonnas, pamatojoties uz to saturu”. Tā kā pārējām trim kolonnām ir viens un tas pats saturs, izmaiņas netiks veiktas. Bet tagad pievienosim papildu teksta saturu vienai no citām kolonnām:

Skatiet raksta Pen Demo CSS tabulas izkārtojuma rekvizītu ar kolonnas platumu un mainīgu saturu, ko Louis Lazaris (@impressivewebs) vietnē CodePen.

Tagad, noklikšķinot uz pārslēgšanas pogas, kolonnas tiks pielāgotas, lai pielāgotos fiksētam izkārtojumam neatkarīgi no satura. Atkal notiek tas pats; pirmā kolonna ir iestatīta uz 400 pikseļiem, pēc tam pārējās kolonnas tiek sadalītas vienādi. Bet šoreiz, tā kā vienā no kolonnām ir papildu saturs, atšķirība ir pamanāma.

Kā fiksēta izkārtojuma algoritms nosaka kolonnu platumus

Nākamajiem diviem demonstrējumiem vajadzētu palīdzēt saprast, ka tabulas pirmā rinda palīdz noteikt kolonnas platumu, kas iestatīts kā table-layout: fixed.

CSS tabulas izkārtojumu ar šūniņu 1. rindā, izmantojot norādīto platumu, skatiet Louis Lazaris (@impressivewebs) vietnē CodePen.

Iepriekš minētajā demonstrācijā pirmās šūnas tabulas pirmajā rindā platums ir 350 pikseļi. Pārslēdzot tiek table-layout: fixedpielāgotas pārējās kolonnas, bet pirmā paliek nemainīga. Tagad izmēģiniet šo demonstrāciju:

CSS tabulas izkārtojumu ar šūniņu 2. rindā, izmantojot norādīto platumu, skatiet Louis Lazaris (@impressivewebs) vietnē CodePen.

Šajā gadījumā tā ir otrā rinda, kuras platums ir piestiprināts pie pirmās tabulas šūnas. Noklikšķinot uz pārslēgšanas pogas, tiek koriģēti visi kolonnu platumi. Atkal tas ir tāpēc, ka fiksētā izkārtojuma algoritms izmanto pirmo rindu kolonnu platumu noteikšanai, un gala rezultāts ir tāds, ka platumi tiek sadalīti vienādi.

Fiksēta izkārtojuma algoritma priekšrocības

Lietošanas estētiskajiem ieguvumiem table-layout: fixedjābūt skaidri redzamiem no iepriekšminētajiem demonstrējumiem. Bet otrs lielākais ieguvums ir veiktspēja. Specifikācija fiksēto algoritmu sauc par “ātru” algoritmu, un tam ir iemesls. Pirms kolonnu lieluma noteikšanas pārlūkprogrammai nav nepieciešams analizēt visu tabulas saturu; tai jāanalizē tikai pirmā rinda. Tātad rezultāts ir ātrāka tabulas izkārtojuma apstrāde.