Верстка HTML: ширина столбцов в таблице не соответствует указанной

iddqt · №1

Структура страницы представляет собой три раздела - шапка, контент, подвал - визуально разделенные на две колонки определенной ширины, например 30% и 70%.

Используем табличную верстку страницы. Каждый раздел - шапку, контент, подвал - помещаем в отдельную таблицу (по известной причине). Ширина таблиц - 100%. Все три таблицы содержат по два столбца с указанной для каждого шириной - 30% и 70% соответственно. Окна браузеров развернуты на весь экран, широченных картинок, распорок и т.п. - нет, у таблиц и ячеек нулевые отступы и бордюры - всё предельно просто.

Наполняем ячейки содержимым (в основном текст, небольшие таблицы) - в FireFox ширина столбцов во всех разделах начинает разъезжаться - где шире, где уже. В IE все три таблицы отображаются корректно - ширины столбцов соответствуют заданным.

Вопрос - как добиться отображения в FireFox одинаковой ширины колонок во всех трех таблицах?
Использование одной таблицы из трех строк - исключено.

Отредактировано iddqt (21-04-2006 06:36:18)

Lynn · №2

Отличное описание… Вот ещё бы пример странички…

Если попробовать включить телепатию, то против „известной причины“ отлично помогает CSS-правило table-layout:fixed. Да и против разной ширины столбцов оно тоже помогает.

Al_H · №3

А не могли бы Вы код прислать?

iddqt · №4

Lynn пишет

против „известной причины“ отлично помогает CSS-правило table-layout:fixed

Если применить для таблиц table-layout: fixed, то ее размеры будут определяться браузером в следующем порядке:

Простое выставление table-layout: fixed не помогло - колонки во всех разделах по-прежнему разной ширины. Приписываю <col width="30%"><col width="70%"> и всё становится на свои места - колонки в разделах принимают нужный вид.
Но, смотрю ниже, во вложенных таблицах контента, у которых не была указана ширина ячеек, все столбцы стали одинаковой ширины - не работает автоподбор ширины по содержимому. Решил путем выставления table-layout: auto для вложенных таблиц.

Итак, решение:
table {table-layout: fixed}
table table {table-layout: auto}
+
<col width="30%"><col width="70%">

Затем выявилось другое побочное явление - при уменьшении ширина окна браузера, колонки наползают друг на друга. И в IE, и в Mozilla.
Судя по всему, это явное неисправляемое последствие применения table-layout: fixed. Буду искать дальше...

Спасибо!

Unghost · №5

==> Проблемы с сайтами

Полезная информация

№121-04-2006 06:26:49

Верстка HTML: ширина столбцов в таблице не соответствует указанной

№221-04-2006 10:38:38

Re: Верстка HTML: ширина столбцов в таблице не соответствует указанной

№321-04-2006 10:53:24

Re: Верстка HTML: ширина столбцов в таблице не соответствует указанной

№421-04-2006 13:19:06

Re: Верстка HTML: ширина столбцов в таблице не соответствует указанной

№522-04-2006 03:40:42

Re: Верстка HTML: ширина столбцов в таблице не соответствует указанной

Board footer