Появилась задача сверстать таблицу так, чтобы столбцы и ячейки 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+.
Комментариев нет:
Отправить комментарий