Зафиксировать ширину столбцов таблицы css

Таблицы в HTML существуют очень давно. И так сложилось, что они выполняли, и наверное еще выполняют, не только функции хранения табличных данных... Часто их использовали для создания сетки сайта или вертикального выравнивания содержимого. Но время идет, технологии не стоят на месте, а активно развиваются и таблицы используют в основном только для хранения табличных данных... Это конечно правильно!

Есть у таблиц одна интересная особенность - распределять ширину колонок по своему усмотрению... Ей нипочем ни width, ни max-width, она сделает так, как ей хочется... Автоматически распределяет свободное пространство между колонками в зависимости от содержимого. Поэтому, две двухколоночные таблицы на странице могут выглядеть по-разному! В большинстве случаев это никуда не годится... Как же сделать поведение таблиц прогнозируемым и более послушным? Оказывается, можно!

Есть у таблиц замечательное css свойство: table-layout. Оно принимает 3 значения: auto | fixed | inherit. Нас интересует значение fixed. Если задать его таблице, то ширина колонок будет определяться либо с помощью тега col, либо на основе первой строки.

Если данные о ширине колонок первой строки получить невозможно, то таблица делится на колонки равной ширины.

Внимание! При использовании этого значения, содержимое, которое не поместилось в ячейку указанной ширины, будет «обрезано» или наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет.

Для корректной работы этого значения обязательно должна быть задана ширина таблицы.