согласно моему ответу здесь: Таблица с разметкой таблицы: исправлено;и как сделать один столбец шире
Я действительно говорил, что col elements будет также средством контроля ширины других столбцов ..
Ваша таблица очень точная, 1x столбец шириной 100px + (24 группы по 4) = 96 x 6px, в общей сложности это составляет 676 пикселей, не включая варианты округления или границ в браузере. Вы также сделали заполнение в em - но вы сделалишириной таблицы на 100%, чтобы браузеры знали, какие из ваших столбцов расширены, и на сколько, когда ширина таблицы больше, чем эти вычисления, а также фактически вычислили и округлили смесь em и px, стабильно по браузерумного ..
Использование с элементом col проще, и таблица действительно расширяется "пропорционально", а также означает, что таблица будет прокручиваться, а не сдавливаться, когда явная ширина шире, чем окно..
Использование метода col для определения размера столбца означает, что вы не устанавливаете размер где-либо еще.Браузер должен сначала поразить эти значения ширины, поэтому они находятся в верхней части таблицы, прежде чем он даже должен начать рендеринг ячеек, и он не должен затем нажимать что-либо еще, что может сбить его со счета;) (не легков случае с IE!) - и извините, но подвох в том, что даже левая / правая подстановка ячеек приведёт к разным браузерам цикл - IE7 уже нужна разная ширина ячейки (я вставил хак в CSS, я думаю, что больше нетчем различия округления в браузере), и как только вводится заполнение, становится еще хуже - я добавил к своей скрипке компромисс, согласно которому заполнение только для первого столбца, поскольку другой текст, охватывающий столбцы и центрированный, может обойтись без отсутствия!
в jsfiddle, работающий в IE7, если вы закомментируете ширину мастер-таблицы, вы должны увидеть, что таблица становится правильным измерением - красныйниже находится панель размером 676 пикселей, о которой я упоминал ранее), но если вы затем сузите окно, таблицаquish, я не знаю, какое поведение вы хотели бы, я просто указываю на это, вы, конечно, могли бы выбрать правильную ширину и дать внешнему содержащему div минимальную ширину, чтобы у него никогда не было шанса сжать ..в любом случае ..
(и извините, я взял CSS, эта таблица не нужна, чтобы ее было легче читать)
добавлено:
** Iя знаю, что это не работает в браузерах webkit, я смотрю на это .. *
Обновление
Webkit браузеры имеют собственную ширинуошибка вычисления с colspan, и поскольку в вашей таблице нет строк без colspan, было лишь одно решение, которое я нашел, это добавить пустую строку с 97 пустыми ячейками, а затем скрыть строку, я поместил ее сначала в источник в отдельном tbody ID чтобы его было легко скрыть, и поэтому браузеры сначала нажимают на эту строку ... это помогает браузерам Webkit, так как он может затем использовать эту строку для вычисления ширины отдельных ячеек, прежде чем она будет продолжена, и для вычисления colspan.
оригинальный jsfiddle имеетбыл обновлен, так как это было единственное изменение, без изменений в методе, для чего это стоило, я попробовал и метод <col> width и <td> width в Webkit, но он потерпел неправильное вычисление colspan независимо от того, в какую сторонуэто было сделано ..