x
 
Евгений Волков
8 марта 2012

Одной из особенностей таблиц является то, что их минимальная ширина далеко не всегда зависит от указанной в ЦСС. Проблема в том, что их ширина зависит от контента. То есть она не сжимается меньше суммы максимальных ширин всех ячеек.

Как решать такую задачу?



Содержимое таблицы не будет влиять на расчёт её ширины, если сказать ей table-layout: fixed:

КонстантинКонстантинопольский


Я не знаю, какая задача перед вами стоит, но предположу, что если исходное поведение таблиц вас не устраивает, возможно, вам вообще стоит отказаться от таблиц, так как table-layout: fixed отключает некоторые специальные свойства, которые часто и оправдывают целесообразность табличной вёрстки.

Попробуем разобраться.

В «фиксированном» режиме браузер расчитывает ширину колонок на основе значений из первой строки или тегов <col>. Если такие значения получить нельзя, таблица делится на колонки равной ширины. При этом содержимое, выходящее за пределы ячейки, обрезается либо накладывается на следующую ячейку. Для правильной работы этого значения должна быть задана ширина таблицы.

В стандартном режиме (table-layout: auto), браузер сначала загружает и анализирует содержимое ячеек, а затем отображает. Если у колонки не указана ширина, она пропорциональна количеству содержимого:

Общеизвестно, что тоталитарный тип политической культуры интегрирует антропологический тип общественной культуры, впрочем, это несколько не совпадает с концепцией. Парадигма трансформации общества теоретически определяет политический процесс в современной России.

Идеология неоднозначна.Капиталистическое мировое общество, на первый взгляд, означает коллапс Советского Союза, что неминуемо повлечет эскалацию напряжения в стране.


Указанные значения ширины колонок применяются до тех пор, пока их содержимое не выходит за пределы:

25% 50% 25%


В противном случае невлезающий контент распирает колонку и она отнимает место у других ячеек:

25%
150px × 50px
50% 25%


А если отнимать уже нечего, распирает таблицу:

25%
150px × 50px
50%
150px × 50px
25%
150px × 50px


Использовать таблицы в стандартном режиме компоновки для модульной сетки опасно — колонки могут непредсказуемо разъехаться. Более того, для расчёта размеров большой таблицы может потребоваться ощутимое время.

Также в документации сказано, что браузеры могут использовать свои алгоритмы и правила для отрисовки таблиц при значении table-layout: auto — будьте осторожны.

Ещё один наглядный пример, переключайте радио-кнопки:

#table-layout-example TABLE {
  width: 300px;
  table-layout: 
                ;
  }
300px
100px
125px
85px
100px


Предлагаю уважаемым советчикам собрать уместные примеры применения разных значений table-layout и таблиц вообще.


Поздравляю читательниц с 8 Марта :-)


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Евгений Волков
8 марта 2012

Спасибо за совет! Виноват, что не описал конкретную задачу. Конкретно проблема возникла в системе документооборота в интерфейсе писем: данные всегда случайны, никогда не знаешь, какой ширины должна быть колонка.

Конечно, меня посещали мысли, что это всё-таки список писем. Но по таблице проще ориентироваться (все выведенные атрибуты нужны в повседневной работе), и её свойства «делать колонки» в этом случае очень удобны.

Пока что проблема решилась с помощью media queries, на определённом разрешении боковая колонка, которая и бывает проблемой из-за слишком широкой таблицы, уползает наверх.

Иван Титов
8 марта 2012

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

В таблице удобно то, что ячейки с неуказанной шириной распираются до размера внутреннего блока, и при этом ширина остальных столбиков подстраивается, если указать её в процентах.

Если же это сделать блоками и подогнать ширину блоков и отступов (в любых единицах), то всё может развалиться при изменении содержимого блоков. Даже размер шрифта может повлиять, поэтому в данном случае таблица — хорошее «железобетонное» решение.


9 марта 2012

Однажды таблицы помогли мне правильно растянуть слоган неизвестной длины ровно по логотипу.

http://artpolikarpov.ru/html/table-animation/


9 марта 2012

На сайте «Я расту» таблицы используются для выравнивания блоков по вертикали внутри кружков.

http://yarastore.ru/

Роман Парпалак
11 марта 2012

Иван, недавно на Хабре было описано, как получить такой же результат без таблиц, с помощью text-align justify: http://habrahabr.ru/blogs/css/138501/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

4 Сайты для слабовидящих 2 1 4




Недавно всплыло

Как написать хорошее резюме? 7 Визуализация проявляет 4 Поделитесь соображениями, как работать, путешествуя 8 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5