четверг, 11 марта 2010 г.

Вёрстка, "overflow:hidden" для ячейки таблицы

Появилась задача сверстать таблицу так, чтобы столбцы и ячейки table не разъезжались, не тянулись, при изменении количества содержимого внутри ячейки. Оказалось, не всё так просто. Повесив свойство overflow:hidden для ячейки таблицы - не будет работать. Как растягивал таблицу контент внутри ячеек, так и будет тянуть.

Нашёл, что к тегу <table> или к элементу, у которого свойство display установлено как table или inline-table можно применять свойство:

table-layout: auto | fixed

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

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

Работает под браузерами: IE6+, IE7+, Firefox 2+, Firefox 3+, Opera 9.52+, Safari 3.1+, Chrome 0.3+.

Комментариев нет:

Отправить комментарий

Рекоммендую

Попробуйте надёжный хостинг от Scala Hosting