Stalo maketas - CSS-gudrybės

Į table-layoutnuosavybės apibrėžia, ką algoritmas naršyklę turėtų naudoti išdėstyti lentelės eilutes, langelius ir stulpelius.

table ( table-layout: fixed; )

Kaip paaiškinta CSS2.1 specifikacijoje, stalo išdėstymas paprastai yra skonio reikalas ir gali skirtis priklausomai nuo dizaino pasirinkimo. Tačiau naršyklės automatiškai taikys tam tikrus apribojimus, kurie apibrėš, kaip išdėstomos lentelės. Tai atsitinka, kai table-layoutypatybė nustatyta auto(numatytasis). Bet šie apribojimai gali būti panaikinti, kai table-layoutyra nustatyta fixed.

Vertybės

• auto: numatytasis. Naršyklės automatinis algoritmas naudojamas apibrėžti, kaip išdėstomos lentelės eilutės, langeliai ir stulpeliai. Gautas lentelės išdėstymas paprastai priklauso nuo lentelės turinio.
• fixed: Naudojant šią vertę, lentelės išdėstymas nepaiso turinio, o naudoja lentelės plotį, bet kokį nurodytą stulpelių plotį ir kraštinių bei langelių tarpus. Naudojamos stulpelių vertės yra pagrįstos plotiais, apibrėžtais stulpeliuose arba langeliuose pirmoje lentelės eilutėje.
• inherit: rodo, kad vertė paveldima iš table-layoutjos pirminės vertės

Norint, kad reikšmė fixedturėtų kokį nors poveikį, lentelės plotis turi būti nustatytas kitur nei auto(numatytasis widthypatybė). Žemiau pateiktose demonstracijose visi lentelės plotiai yra nustatyti 100%, o tai daro prielaidą, kad mes norime, kad lentelė užpildytų pagrindinį konteinerį horizontaliai.

Geriausias būdas pamatyti fiksuoto stalo išdėstymo algoritmo poveikį yra demonstracinė versija.

Žr. CSS lentelės išdėstymo savybės „Pen Demo“, kurią pateikė Louisas Lazaris (@impressivewebs) „CodePen“.

Kai pirmą kartą peržiūrėsite aukščiau pateiktą demonstracinę versiją, pastebėsite, kad lentelės stulpelių išdėstymas yra nesubalansuotas ir nepatogus. Tuo metu lentelė naudoja numatytąjį naršyklės algoritmą apibrėžti, kaip išdėstyti lentelę, o tai reiškia, kad turinys padiktuos išdėstymą. Demonstracijoje šis faktas perdėtas įtraukiant ilgą teksto eilutę į vieną lentelės langelį, o visos kitos lentelės langeliai naudoja tik po du žodžius. Kaip matote, naršyklė išplečia pirmąjį stulpelį, kad tilptų didesnis turinys.

Jei spustelėsite mygtuką „Perjungti lentelės išdėstymą: pataisyta“, pamatysite, kaip atrodo lentelės išdėstymas, kai naudojamas „fiksuotas“ algoritmas. Kai table-layout: fixedtaikoma, turinį nebėra diktuoja išdėstymą, bet vietoj to, naršyklė naudoja jokios funkcijos pločių iš lentelės pirmoje eilutėje nustatyti stulpelių pločius. Jei pirmojoje eilutėje nėra plotių, stulpelių plotiai lentelėje padalijami vienodai, neatsižvelgiant į turinį langelių viduje.

Kiti pavyzdžiai gali padėti tai padaryti aiškesnę. Šioje demonstracinėje lentelėje yra elementas, kurio pirmojo elemento plotis yra 400px. Šiuo atveju atkreipkite dėmesį, kad perjungimas table-layout: fixedneturi jokio poveikio.

Žr. CSS lentelės išdėstymo savybės „Pen Demo“, kurią pateikė Louisas Lazaris (@impressivewebs) „CodePen“.

Taip atsitinka todėl, kad numatytasis išdėstymo algoritmas iš esmės sako „pirmąjį stulpelį padarykite 400 taškų pločio, o likusius stulpelius paskirstykite pagal jų turinį“. Kadangi kiti trys stulpeliai turi tą patį turinį kaip vienas kitas, pakeitimų nebus. Bet dabar pridėkime papildomo teksto turinio į vieną iš kitų stulpelių:

Žr. „Pen Demo“ CSS lentelės išdėstymo ypatybę su colio pločiu ir kintamu turiniu, kurį pateikė Louisas Lazaris (@impressivewebs) „CodePen“.

Dabar, jei spustelėsite perjungimo mygtuką, pamatysite stulpelius, pritaikytus fiksuotam išdėstymui, neatsižvelgiant į turinį. Vėlgi tas pats vyksta; pirmasis stulpelis yra nustatytas 400 taškų, tada likę stulpeliai padalijami po lygiai. Tačiau šį kartą, kadangi viename iš stulpelių yra papildomo turinio, skirtumas pastebimas.

Kaip fiksuoto išdėstymo algoritmas nustato stulpelių pločius

Šie du demonstraciniai elementai turėtų padėti suprasti, kad pirmoji lentelės eilutė padeda nustatyti stulpelio pločius, nustatytą table-layout: fixed.

Žr. „Pen Demo“ CSS lentelės išdėstymą su langeliu 1 eilutėje, nurodytą Louis Lazaris (@impressivewebs) apibrėžtą plotį „CodePen“.

Pirmiau pateiktoje demonstracinėje lentelėje pirmosios lentelės eilutės pirmojo langelio plotis yra 350 taškų. Perjungus table-layout: fixedkoreguojami kiti stulpeliai, tačiau pirmasis lieka tas pats. Dabar išbandykite šią demonstracinę versiją:

Peržiūrėkite „Pen Demo“ CSS lentelės išdėstymą su langeliu 2 eilutėje, nurodytą Louis Lazaris (@impressivewebs) apibrėžtą plotį „CodePen“.

Šiuo atveju tai yra antroji eilutė, kurios plotis pritvirtintas prie pirmojo lentelės langelio. Spustelėjus perjungimo mygtuką, visi stulpelių plotiai sureguliuojami. Vėlgi, taip yra todėl, kad fiksuoto išdėstymo algoritmas naudoja pirmąją eilutę stulpelių pločiams nustatyti, o galutinis rezultatas yra tas, kad plotis paskirstomas vienodai.

Fiksuoto išdėstymo algoritmo privalumai

Estetinė naudojimo nauda table-layout: fixedturėtų būti aiški iš aukščiau pateiktų demonstracijų. Tačiau kita pagrindinė nauda yra našumas. Specifikacija fiksuotą algoritmą nurodo kaip „greitą“ algoritmą ir dėl rimtų priežasčių. Naršyklei nereikia nustatyti visos lentelės turinio prieš nustatant stulpelių dydį; reikia tik išanalizuoti pirmąją eilę. Taigi rezultatas yra greitesnis lentelės išdėstymo apdorojimas.

Daugiau informacijos

• Fiksuoti lentelių išdėstymai
• Fiksuotas lentelės išdėstymas CSS2.1 specifikacijoje
• table-layoutNuosavybė CSS Stalo modulio 3 lygio

Naršyklės palaikymas

„Chrome“	„Safari“	„Firefox“	Opera	T.Y	„Android“	„iOS“
1+	1+	1+	7+	5+	2.1+	3+