Немного про таблицы и html

Ну вот давно я что-то не писал ничего о верстке. А вот сегодня захотелось. В общем-то, на работе как всегда ничего интересного, разве что был один тикет, о котором и будет речь.

У нас почти на каждой странице веб-продукта выводятся табличные данные. Поэтому и сами таблицы в верстке — обычное дело. Очередной баг заключался в том, что в одной из ячеек таблицы была очень большая строчка, которая не должна была переноситься на другую строку. А таблица была завернута в два блока, один из которых, родительский, был фиксированной ширины. Тот, что был фиксированной ширины, не давал контенту разъезжаться на всю ширину страницы, а второй блок выполняет декоративную функцию. Ну и естественно, в IE таблица спокойно распирала блоки (неверное поведение), а вот все остальные браузеры отказывались это делать. А так как нам нужно добиться распирания блоков в этих браузерах, нужно было что-то придумать.

Решение пришло неожиданно. Подивился тому, что таблице совершенно пофиг на размеры страницы и плевать она хотела на установленные размеры. И тут я понял. А что париться, пусть обертывающий блок, который должен растягиваться вслед за таблицей, будет фактически иметь свойства таблицы!

Решение:
.decoration-block { display: table; width: 100%; }

Вот, в общем-то, и всё. Теперь этот блок растягивается вслед за таблицей, когда содержимое таблицы больше, чем ширина фиксированного блока.

1 year ago  /  2 notes  /