Ширина CSS и максимальная ширина объединены

У меня есть следующий код:

<table style="width: 100%; max-width: 800px; table-layout: fixed;">
    ... table stuff here ...
</table>

Я думаю, что очевидно, что я намерен использовать таблицу в полной ширине с максимальным размером 800 пикселей.

Это работает в Internet Explorer и Firefox, однако в Chrome кажется, что max-width игнорируется, когда присутствует width.

Я попытался использовать max-width: 100%; width: 800px;, который снова работает в IE и FF, но max-width игнорируется в Chrome. Я пробовал использовать только max-width: 800px, но в Chrome таблица выходит 1159 пикселей в ширину, а не...!

Если кто-то может помочь в этом, он будет очень признателен.

Ответы

Ответ 1

Добавить

display: block;

для атрибута таблицы style (желательно в файле CSS или в разделе <style> документа, а не в стиле встроенного).

Элементы

<div> по умолчанию имеют display: block, а по умолчанию <table> имеют display: table;. Ваша проблема заключается в том, что свойство max-width применяется только к элементам блока, поэтому вам нужно применить display: block; к таблице.

Ответ 2

Оберните таблицу в div с максимальной шириной:

<div style="width: 100%; max-width: 600px;">
    <table style="width:100%;">
        <tr><td></td></tr>
     </table>
</div>

Ответ 3

Вы можете использовать:

min-width:100%; max-width:800px

Он работает для меня как в IE9, так и в Chrome.

Ответ 4

Используйте min-width: 800 или хотите и установите ширину: 100%. Если размер вашего браузера будет установлен, но размер вашей страницы не будет меньше 800px