✔Почему max-width не работает для таблицы?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+ |
Задача
Ограничить максимальную ширину таблицы заданным значением.
Решение
Свойство max-width не применяется к тегу <table>. Чтобы задать максимальную ширину таблицы создайте тег <div> с ограничениями и в него включите таблицу с шириной 100% (пример.;1).
Пример 1. Использование max-width
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>max-width для таблицы</title>
<style>
table {
width: 100%; /* Ширина таблицы */
div {
max-width: 1000px; /* Ограничиваем ширину таблицы */
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<td>2012</td><td>2013</td><td>2014</td><td>2015</td>
<td>2016</td><td>2017</td><td>2018</td><td>2019</td>
<td>2020</td>
</tr>
</table>
</div>
</body>
</html><!DOCTYPE html>
<html</span>>
<head</span>>
<meta charset="utf-8"</span>>
<title</span>>max-width для таблицы</title</span>>
<style</span>>
table {
width: 100%; /* Ширина таблицы */
div {
max-width: 1000px; /* Ограничиваем ширину таблицы */
</style</span>>
</head</span>>
<body</span>>
<div</span>>
<table border="1"</span>>
<tr</span>>
<td</span>>2012</td</span>><td</span>>2013</td</span>><td</span>>2014</td</span>><td</span>>2015</td</span>>
<td</span>>2016</td</span>><td</span>>2017</td</span>><td</span>>2018</td</span>><td</span>>2019</td</span>>
<td</span>>2020</td</span>>
</tr</span>>
</table</span>>
</div</span>>
</body</span>>
</html</span>>[/code]
