Tabeli paigutus - CSS-trikid | CSS-i almanahh 2025

table-layoutVara on määratletud, mida algoritm brauseri peaks kasutama panema Tabeliread, rakkude ja veerud.

table ( table-layout: fixed; )

Nagu CSS2.1 spetsifikatsioonis selgitatud, on laua paigutus üldiselt maitse küsimus ja see sõltub disainivalikutest. Brauserid rakendavad aga automaatselt teatud piiranguid, mis määravad tabelite paigutuse. See juhtub siis, kui table-layoutatribuudiks on seatud auto(vaikimisi). Kuid neid piiranguid saab tühistada, kui see table-layouton seatud fixed.

Väärtused

auto: vaikimisi. Brauseri automaatset algoritmi kasutatakse tabeli ridade, lahtrite ja veergude paigutuse määratlemiseks. Saadud tabeli paigutus sõltub üldiselt tabeli sisust.
fixed: Selle väärtuse korral ignoreerib tabeli paigutus sisu ja kasutab selle asemel tabeli laiust, mis tahes määratud veergude laiust ning äärise ja lahtrite vahekauguse väärtusi. Kasutatavad veeruväärtused põhinevad tabeli esimese rea veergudes või lahtrites määratletud laiustel.
inherit: näitab, et väärtus on päritud table-layouttema vanema väärtusest

Selleks, et väärtusel fixedoleks mingi mõju, tuleb tabeli laiuseks seada midagi muud kui auto( widthatribuudi vaikeväärtus ). Allolevates demodes on kõik tabeli laiused seatud 100% -le, mis eeldab, et tahame, et tabel täidaks oma vanemmahuti horisontaalselt.

Parim viis fikseeritud tabeli paigutuse algoritmi mõjude nägemiseks on demo.

Vaadake Louis Lazarise (@impressivewebs) CSS-i tabelipaigutuse atribuudi Pen Demo CodePenilt.

Kui vaatate ülaltoodud demot esmakordselt, märkate, et tabeliveergude paigutus on tasakaalustamata ja ebamugav. Sel hetkel kasutab tabel brauseri vaikealgoritmi, et määratleda, kuidas tabel paigutada, mis tähendab, et sisu dikteerib paigutuse. Demo liialdab seda fakti, lisades ühte tabelirakku pika tekstirea, samas kui kõik teised tabelirakud kasutavad mõlemas vaid kahte sõna. Nagu näete, laiendab brauser esimest veergu suurema hulga sisu mahutamiseks.

Kui klõpsate nupul „Lülita tabelipaigutus: fikseeritud”, näete, kuidas tabeli paigutus välja näeb, kui kasutatakse fikseeritud algoritmi. Kui table-layout: fixedrakendatakse sisu enam dikteerib paigutus, kuid selle asemel, brauser kasutab mis tahes määratletud laiused alates tabeli esimeses reas määratleda veerulaiuse. Kui esimesel real laiuseid pole, jagatakse veeru laiused tabeli vahel võrdselt, olenemata lahtrite sisust.

Edasised näited võivad seda selgemaks muuta. Järgmises demos on tabelis element, mille esimese elemendi laius on 400px. Pange tähele, et sel juhul table-layout: fixedpole lülitamisel mingit mõju.

Vaadake Louis Lazarise (@impressivewebs) CSS-i tabelipaigutuse atribuudi Pen Demo CodePenilt.

See juhtub seetõttu, et vaikemallipaigutusalgoritm ütleb sisuliselt: "tehke esimene veerg 400px laiuseks ja jaotage ülejäänud veerud nende sisu järgi". Kuna ülejäänud kolmes veerus on üksteisega sama sisu, siis muudatusi ei toimu. Kuid lisame nüüd mõnele teisele veerule mõne lisateksti:

Vaadake Louis Lazarise (@impressivewebs) CSP-i tabelipaigutuse atribuuti Col Loa ja muutuva sisuga Pen Demo CodePenis.

Kui klõpsate nüüd lülitusnuppu, näete veerge, mis on fikseeritud paigutusega kohandatud, olenemata sisust. Taas kordub sama asi; esimese veeru väärtuseks määratakse 400 pikslit, seejärel jagatakse ülejäänud veerud võrdselt. Kuid seekord, kuna ühes veerus on lisasisu, on erinevus märgatav.

Kuidas fikseeritud paigutuse algoritm määrab veeru laiused

Järgmised kaks demot peaksid aitama mõista, et tabeli esimene rida aitab määratleda tabeli veerulaiused table-layout: fixed.

CSS-i tabelipaigutuse koos lahtriga 1. reale Pen Demo leiate Louis Lazarise (@impressivewebs) määratletud laiusest CodePenis.

Ülaltoodud demos on tabeli esimese rea esimese lahtri laius 350 pikslit. Lülitamine table-layout: fixedreguleerib teisi veerge, kuid esimene jääb samaks. Nüüd proovige järgmist demo:

CSS-i tabelipaigutuse koos lahtriga 2. reale Pen Demo leiate Louis Lazarise (@impressivewebs) määratletud laiusest CodePenis.

Sel juhul on see teine rida, mille laius on kinnitatud esimese tabelirakuga. Nüüd, kui nupule klõpsatakse, reguleeritakse kõiki veergude laiusi. See on jällegi seetõttu, et fikseeritud paigutuse algoritm kasutab veergude laiuste määramiseks esimest rida ja lõpptulemus on see, et see jaotab laiused võrdselt.

Fikseeritud paigutuse algoritmi eelised

Kasutamise esteetilised eelised table-layout: fixedpeaksid selguma ülaltoodud demonstratsioonidest. Kuid teine peamine eelis on jõudlus. Spetsifikatsioonis viidatakse fikseeritud algoritmile kui „kiirele“ algoritmile ja seda põhjusega. Brauser ei pea enne veergude suuruse määramist kogu tabeli sisu analüüsima; see vajab ainult esimese rea analüüsimist. Seega on tulemuseks tabeli paigutuse kiirem töötlemine.