it-swarm.com.ru

Почему эта таблица HTML не работает должным образом в Chrome?

Рассмотрим эту простую таблицу HTML:

<!doctype html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table style="border-collapse: collapse; table-layout: fixed; width: 280px;">
        <tr>
            <td style="padding: 5px; width: 50px; border: 0; Word-wrap: break-Word;">a</td>
            <td style="padding: 5px; width: 100px; border: 0; Word-wrap: break-Word;">b</td>
            <td style="padding: 5px; width: 100px; border: 0; Word-wrap: break-Word;">c</td>
        </tr>
    </table>
</body>
</html>

Это правильно отображается во всех основных браузерах, кроме Chrome, в котором ширина столбцов причудливо получается равной 46px, 102px и 102px соответственно.

Если я возьму декларацию ширины CSS из элемента таблицы, то она будет правильно отображаться в Chrome. Но мне нужно это там, иначе перенос слов не будет работать правильно.

Есть идеи, почему это не работает? Я пробовал разные типы документов, и это ничего не изменило, поэтому я предполагаю, что это не проблема таблицы HTML5.

Правка: Оказывается, если вы укажете table-layout: fixedи ширину пикселя для элемента tableand ширину пикселя в каждом столбце, то Chrome будет считать, что ширина столбца включить отступы. Это противоречит блочной модели W3C и нарушает требуемое поведение CSS2.

Если вы не укажете table-layout: fixed или не укажете ширину пикселя в элементе table, то Chrome правильно примет ширину столбцов, указанную вами для отступа exclude. Все остальные браузеры предполагают, что ширина столбцов исключение дополняется.

В приведенном выше примере указание ширины 60px, 110px и 110px решит проблему в Chrome, но затем устранит ее в любом другом браузере. Значения 46px, 102px и 102px получены из Chrome, равномерно распределяющего столбцы с соотношением 40:90:90 вместо 50: 100: 100.

15
melkamo

Я сам исправил эту проблему сегодня, используя table-layout: fixed и box-sizing: border-box, чтобы Chrome прекратил учитывать отступы. В противном случае вы никогда не узнаете, какую модель размеров выберет Chrome, даже для двух очень похожих таблиц.

6
Chris M. Welsh

мой метод, чтобы исправить это, выполняется только для браузера Chrome. Мы используем только фиксированные таблицы в нашем веб-приложении, и, кажется, это работает хорошо, полезно знать, что иногда Chrome идеально измеряет ширину столбца, но иногда не в зависимости от того, где находится таблица (и большая часть находится внутри того, что он расположен).

                var correctedWidth;
                var extraSize;
                //chrome is taking the padding and border to calculate the column width , not other browsers
                $('table.default.fixed > thead > tr > th').each(function()
                {

                    if ($(this).attr('width')!='undefined' && $(this).attr('width')!=null)
                    {
                        if ($(this).attr('sizeUpdated')=="undefined" || $(this).attr('sizeUpdated')==null) {

                            extraSize = parseInt($(this).css('padding-left'))+parseInt($(this).css('padding-right'))+2; //2 for the borders (2*1px)

                            if ( parseInt($(this).attr('width'))!= $(this).width() )
                            {
                                correctedWidth=$(this).width()+2*(extraSize);
                            }
                            else
                            {
                                correctedWidth=$(this).width()+extraSize;
                            }
                            $(this).attr('width',correctedWidth+'px');
                            $(this).attr('sizeUpdated','Y');

                        }
                    }
                });
1
Greg

Ну, моя математика говорит, что Chrome делает то, что должен:

102 + 102 + 46 = 250 пикселей -> Ширина

2 (5) + 2(5) +2 (5) = 10 + 10 + 10 = 30px -> Заполнение

Ширина + отступ = 250 + 30 = 280px или ширина, указанная для таблицы.

1
Tieson T.

Я исправил эту проблему, удалив родительский элемент (fieldset), который имел следующее свойство:

display: inline-flex; 
0
Trace