Почему 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>
