Почему эта 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 и ширину пикселя в элементе table и ширину пикселей в каждом столбце, то Chrome предположит, что ваши ширины столбцов включают дополнение. Это противоречит модели коробки W3C и нарушает требуемое поведение CSS2.

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

102 + 102 + 46 = 250px → Ширина

2 (5) + 2 (5) +2 (5) = 10 + 10 + 10 = 30px → Прокладка

Widths + Padding = 250 + 30 = 280px или ширина, указанная для таблицы.

Ответ 3

мой метод исправить это, выполненный только для браузера 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');

                        }
                    }
                });

Ответ 4

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

display: inline-flex;