Táblázat-elrendezés - CSS-trükkök

A table-layouttulajdonság meghatározza, hogy a böngésző milyen algoritmust használjon a táblázatsorok, cellák és oszlopok elrendezéséhez.

table ( table-layout: fixed; )

Amint azt a CSS2.1 specifikációban kifejtették, az asztal elrendezése általában ízlés kérdése, és a tervezési lehetőségektől függően változik. A böngészők azonban automatikusan alkalmaznak bizonyos korlátozásokat, amelyek meghatározzák a táblázatok felépítését. Ez akkor történik, ha a table-layouttulajdonság értéke auto(alapértelmezett). De ezek a megszorítások feloldhatók, ha be table-layoutvan állítva fixed.

Értékek

auto: az alapértelmezett. A böngésző automatikus algoritmusa határozza meg, hogy a táblázat sorai, cellái és oszlopai miként kerüljenek elrendezésre. Az így kapott táblázatelrendezés általában a táblázat tartalmától függ.
fixed: Ezzel az értékkel a tábla elrendezése figyelmen kívül hagyja a tartalmat, ehelyett a tábla szélességét, az oszlopok bármelyik megadott szélességét, valamint a szegély és a cellák távolságát használja. Az alkalmazott oszlopértékek a táblázat első sorának oszlopokban vagy cellákban meghatározott szélességein alapulnak.
inherit: azt jelzi, hogy az érték table-layouta szülő értékéből öröklődik

Annak érdekében, hogy a (z) értéke fixedbármilyen hatást gyakoroljon, a tábla szélességét másra kell beállítani, mint auto(a widthtulajdonság alapértelmezett értéke ). Az alábbi bemutatókban az asztal összes szélessége 100% -ra van állítva, ami azt feltételezi, hogy azt akarjuk, hogy a táblázat vízszintesen töltse ki a szülőtartályát.

A rögzített tábla-elrendezés algoritmusának hatásait a bemutató segítségével lehet legjobban megismerni.

Lásd a Pen Demo for CSS table-layout tulajdonságát, Louis Lazaris (@impressivewebs) a CodePen-en.

A fenti bemutató első megtekintésekor észreveszi, hogy a táblázat oszlopainak elrendezése kiegyensúlyozatlan és kényelmetlen. Ekkor a táblázat a böngésző alapértelmezett algoritmusával határozza meg a táblázat elrendezésének módját, ami azt jelenti, hogy a tartalom diktálja az elrendezést. A bemutató eltúlozza ezt a tényt azzal, hogy egy hosszú szövegsort tartalmaz egy táblázat cellájába, míg az összes többi táblázat cellája csak két szót használ. Amint láthatja, a böngésző kibővíti az első oszlopot, hogy befogadja a nagyobb mennyiségű tartalmat.

Ha rákattint a „Táblázat-elrendezés váltása: rögzített” gombra, láthatja, hogy néz ki a táblázat elrendezése a „fix” algoritmus használatakor. Ha table-layout: fixedalkalmazzák, a tartalom már nem diktálja az elrendezés, de ehelyett a böngésző használ semmilyen meghatározott szélességű a táblázat első sorában, hogy meghatározza az oszlopok szélességét. Ha az első sorban nincs szélesség, az oszlopszélességeket egyenlően osztják el a táblázatban, függetlenül a cellákon belüli tartalomtól.

További példák segíthetnek ennek egyértelműbbé tételében. A következő bemutatóban a táblázatnak van egy eleme, amelynek első elemének szélessége 400px. Ebben az esetben vegye table-layout: fixedfigyelembe , hogy a váltásnak nincs hatása.

Lásd a Pen Demo for CSS table-layout tulajdonságát, Louis Lazaris (@impressivewebs) a CodePen-en.

Ez azért történik, mert az alapértelmezett elrendezési algoritmus lényegében azt mondja, hogy „tegye az első oszlopot 400 képpont szélesre, és a többi oszlopot ossza el tartalmuk alapján”. Mivel a másik három oszlop tartalma megegyezik egymással, nem lesz változás. De most adjunk hozzá néhány extra szöveges tartalmat a többi oszlop egyikéhez:

Lásd a Pen Demo for CSS tábla-elrendezés tulajdonságát col szélességgel és változó tartalommal, Louis Lazaris (@impressivewebs) a CodePen-en.

Ha rákattint a váltógombra, akkor az oszlopok a rögzített elrendezéshez igazodnak, függetlenül a tartalomtól. Ismét ugyanaz történik; az első oszlop értéke 400 képpont, majd a többi oszlopot egyenlően osztjuk fel. De ezúttal, mivel az egyik oszlop extra tartalommal rendelkezik, észrevehető a különbség.

A fix elrendezéses algoritmus hogyan határozza meg az oszlopok szélességét

A következő két bemutató segít megérteni, hogy a táblázat első sora segít meghatározni a táblázat oszlopszélességét table-layout: fixed.

Tekintse meg a Toll bemutatót a CSS táblázatos elrendezéséhez, az 1. sor cellájával, Louis Lazaris (@impressivewebs) meghatározott szélességével a CodePen-en.

A fenti bemutatóban a táblázat első sorának első cellája 350px szélességű. A váltás table-layout: fixedmódosítja a többi oszlopot, de az első ugyanaz marad. Próbálja ki a következő bemutatót:

Lásd a Toll bemutatót a CSS táblázatos elrendezéséhez, a 2. sor cellájával, Louis Lazaris (@impressivewebs) meghatározott szélességével a CodePen-en.

Ebben az esetben ez a második sor, amelynek szélessége az első táblázat cellához van kötve. Most, amikor a váltógombra kattint, az összes oszlopszélességet beállítja. Ismét azért, mert a fix elrendezésű algoritmus az első sort használja az oszlopszélességek meghatározására, és a végeredmény az, hogy a szélességeket egyenlően osztja el.

A fix elrendezésű algoritmus előnyei

A használat esztétikai előnyeinek table-layout: fixedegyértelműnek kell lenniük a fenti bemutatókból. De a másik fő előny a teljesítmény. A specifikáció a fix algoritmust „gyors” algoritmusként említi, és jó okkal. A böngészőnek nem kell elemeznie a táblázat teljes tartalmát, mielőtt meghatározza az oszlopok méretét; csak az első sort kell elemeznie. Így az eredmény a táblázat elrendezésének gyorsabb feldolgozása.