Вам нужно вывести таблицу конкретно заданной ширины? Ваша таблица очень большая и при отображении ее "разносит" до неприличных размеров? Да еще при этом свойство max-width не работает? Тогда вы попали по адресу. В этой статье мы рассмотрим способы решения данной проблемы.
Давайте рассмотрим проблему в корне.
Согласно html спецификациям, результат использования свойств max(min)-width(height) для таблиц не определён.
Теперь вспомним немного теории: у нас есть возможность задавать произвольные размеры для блочного элемента.
Следовательно, «внедрив» нашу таблицу в блочную обертку, мы сможем оперировать ее шириной и высотой (а точнее манипулировать посредством изменения параметров родительского блока). Очевидно, что лучшим кандидатом среди блочных структур на роль родителя будет div.
Рассмотрим сказанное на примере.
HTML:
<!DOCTYPE html> <html> <head> <title>Задаем максимальную ширину таблице</title> <meta charset="UTF-8"> <link rel="stylesheet" media="all" type="text/css" href="./style2.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <table border="1"> <tr> <td>Задаем</td><td>фиксированную</td><td>ширину</td><td>таблицы</td> </tr> </table> </div> </body> </html>
CSS:
table { width: 100%; /* Задаем ширину таблицы */ } div { max-width: 900px; /* Задаем ширину родительского блока */}
Как видим, теперь, методом «родительского контроля», можно ограничивать нашу «непослушную» таблицу.
Важно!!!
- Ширина таблицы указывается в процентах от размера родительского элемента.
- Если у вас очень большая таблица, для корректного расчета ширины ячеек можно добавить строчку.
table-layout: fixed
