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

CSS по теме

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.