| 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]
Перейти обратно к новости
|