it-roy-ru.com

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 пикселей ...!

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

26
Niet the Dark Absol

Добавлять 

display: block;

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

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

37
heisenberg

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

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

4
manroe

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

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

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

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

У меня это работает как в IE9, так и в Chrome.

0
Jay