Оформление на маса - CSS-трикове

На table-layoutдефинира собственост какво алгоритъм на браузъра трябва да използвате, за да изложи редове от таблицата, клетки и колони.

table ( table-layout: fixed; )

Както е обяснено в спецификацията CSS2.1, оформлението на таблицата като цяло обикновено е въпрос на вкус и ще варира в зависимост от избора на дизайн. Браузърите обаче автоматично ще приложат определени ограничения, които ще определят начина на подреждане на таблиците. Това се случва, когато table-layoutсвойството е зададено на auto(по подразбиране). Но тези ограничения могат да бъдат премахнати, когато table-layoutе зададено на fixed.

Стойности

auto: по подразбиране. Автоматичният алгоритъм на браузъра се използва за определяне на начина, по който са разположени редовете, клетките и колоните на таблицата. Полученото оформление на таблицата обикновено зависи от съдържанието на таблицата.
fixed: С тази стойност оформлението на таблицата игнорира съдържанието и вместо това използва ширината на таблицата, всяка определена ширина на колоните, както и стойностите на разстоянието между границите и клетките. Използваните стойности на колоните се основават на ширините, дефинирани върху колони или клетки за първия ред на таблицата.
inherit: показва, че стойността се наследява от table-layoutстойността на своя родител

За fixedда има ефект на стойност от, ширината на таблицата трябва да бъде зададена на нещо различно от auto(по подразбиране за widthсвойството). В демонстрациите по-долу всички ширини на таблицата са зададени на 100%, което предполага, че искаме таблицата да запълва родителския си контейнер хоризонтално.

Най-добрият начин да видите ефектите от фиксиран алгоритъм за оформление на таблица е използването на демонстрация.

Вижте Демото на Pen за свойството за оформление на таблици на CSS от Луис Лазарис (@impressivewebs) на CodePen.

Когато за първи път разгледате горната демонстрация, ще забележите, че оформлението на колоните на таблицата е небалансирано и неудобно. В този момент таблицата използва алгоритъма по подразбиране на браузъра, за да дефинира начина на оформяне на таблицата, което означава, че съдържанието ще диктува оформлението. Демото преувеличава този факт, като включва дълъг низ от текст в една клетка на таблица, докато всички останали клетки на таблица използват само по две думи. Както можете да видите, браузърът разширява първата колона, за да побере по-големия бит съдържание.

Ако кликнете върху бутона „Превключване на оформлението на таблицата: фиксирано“, ще видите как изглежда оформлението на таблицата, когато се използва алгоритъмът „фиксиран“. Когато table-layout: fixedсе приложи, съдържанието вече не диктува оформлението, но вместо това браузърът използва всички дефинирани ширини от първия ред на таблицата, за да определи ширините на колоните. Ако на първия ред не присъстват ширини, ширините на колоните се разделят поравно в таблицата, независимо от съдържанието в клетките.

Допълнителни примери могат да помогнат да стане по-ясно това. В следващата демонстрация таблицата има елемент, чийто първи елемент е с ширина 400px. Забележете в този случай превключването table-layout: fixedняма ефект.

Вижте Демото на Pen за свойството за оформление на таблици на CSS от Луис Лазарис (@impressivewebs) на CodePen.

Това се случва, защото алгоритъмът по оформление по подразбиране казва „направете първата колона с ширина 400px и разпределете останалите колони въз основа на тяхното съдържание“. Тъй като останалите три колони имат същото съдържание като всяка друга, няма да има промяна. Но сега нека добавим малко допълнително текстово съдържание към една от останалите колони:

Вижте Демото на Pen за свойството за оформление на таблици на CSS с ширина на col и променливо съдържание от Louis Lazaris (@impressivewebs) на CodePen.

Сега, ако щракнете върху бутона за превключване, ще видите, че колоните се коригират, за да приспособяват фиксирано оформление, независимо от съдържанието. За пореден път се случва същото; първата колона е зададена на 400px, след което останалите колони са разделени по равно. Но този път, тъй като една от колоните има допълнително съдържание, разликата е забележима.

Как алгоритъмът с фиксирано оформление определя ширините на колоните

Следващите две демонстрации трябва да помогнат за разбирането, че първият ред на таблицата е това, което помага да се определят ширините на колоните на таблица, зададена на table-layout: fixed.

Вижте Демото на Pen за оформление на таблицата на CSS с клетка в ред 1, зададена дефинирана от Louis Lazaris (@impressivewebs) на CodePen.

В горната демонстрация първата клетка в първия ред на таблицата има ширина 350px. Превключването table-layout: fixedрегулира останалите колони, но първата остава същата. Сега опитайте следната демонстрация:

Вижте Демото на Pen за оформление на таблицата на CSS с клетка в ред 2, зададена дефинирана ширина от Louis Lazaris (@impressivewebs) на CodePen.

В този случай това е вторият ред, който има ширина, прикрепена към първата си клетка на таблицата. Сега, когато кликнете върху бутона за превключване, всички ширини на колоните се коригират. Отново, това е така, защото алгоритъмът с фиксирано оформление използва първия ред за определяне на ширините на колоните, а крайният резултат е, че той разпределя ширините еднакво.

Предимства на алгоритъм с фиксирано оформление

Естетичните ползи от използването table-layout: fixedтрябва да станат ясни от демонстрациите по-горе. Но другата голяма полза е производителността. Спецификацията се отнася до фиксирания алгоритъм като „бърз“ алгоритъм и с основателна причина. Браузърът не трябва да анализира цялото съдържание на таблицата, преди да определи размера на колоните; трябва само да анализира първия ред. Така че резултатът е по-бърза обработка на оформлението на таблицата.