CSS ширина и максимальная ширина в сочетании

Question

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

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

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

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

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

Если кто-нибудь может помочь с этим, это будет высоко ценится.

Answer 1

Добавьте

display: block;

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

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

Answer 2

Перенос в div с max-width и использование display: block не работают в Chrome 66. Однако table-layout: fixed делает: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Ширина таблицы и столбца задаетсяширина элементов таблицы и столбца или по ширине первого ряда ячеек.Ячейки в последующих строках не влияют на ширину столбцов.При «фиксированном» методе компоновки вся таблица может быть отображена после загрузки и анализа первой строки таблицы.Это может ускорить время рендеринга по сравнению с «автоматическим» методом макета, но последующее содержимое ячейки может не вписаться в предоставленную ширину столбца.Ячейки используют свойство переполнения, чтобы определить, следует ли обрезать какое-либо переполнение содержимого, но только если таблица имеет известную ширину;в противном случае они не будут переполнены клетками.

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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