✔Почему max-width не работает для таблицы?

16 марта 2016 1 531 Самоучитель CSS / Вёрстка 0

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]