max-width для таблицы

Как задать максимальную ширину таблицы

Вам нужно вывести таблицу конкретно заданной ширины? Ваша таблица очень большая и при отображении ее «разносит» до неприличных размеров? Да еще при этом свойство max-width не работает? Тогда вы попали по адресу. В этой статье мы рассмотрим способы решения данной проблемы.

Давайте рассмотрим проблему в корне.

Согласно html спецификациям, результат использования свойств max(min)-width(height) для таблиц не определён.

Теперь вспомним немного теории: у нас есть возможность задавать произвольные размеры для блочного элемента.

Следовательно, «внедрив» нашу таблицу в блочную обертку, мы сможем оперировать ее шириной и высотой (а точнее манипулировать посредством изменения параметров родительского блока). Очевидно, что лучшим кандидатом среди блочных структур на роль родителя будет div.

Рассмотрим сказанное на примере.

DOCTYPE html> html> head> title>Задаем максимальную ширину таблицеtitle> meta charset="UTF-8"> link rel="stylesheet" media="all" type="text/css" href="./style2.css" /> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body> div> table border="1"> tr> td>Задаемtd>td>фиксированнуюtd>td>ширинуtd>td>таблицыtd> tr> table> div> body> html>

table  width: 100%; /* Задаем ширину таблицы */ > div  max-width: 900px; /* Задаем ширину родительского блока */>

Как видим, теперь, методом «родительского контроля», можно ограничивать нашу «непослушную» таблицу.

1. Ширина таблицы указывается в процентах от размера родительского элемента.
2. Если у вас очень большая таблица, для корректного расчета ширины ячеек можно добавить строчку.

Источник

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

Ограничить максимальную ширину таблицы заданным значением.

Решение

Пример 1. Использование max-width

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
 
 
2012
2013
2014
2015
 
2016
2017
2018
2019
 
2020
 
 
 
  

HTML по теме

CSS по теме

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

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Источник

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

Example

Set the width of the table to 100%:

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.

HTML Table Column Width

Example

Set the width of the first column to 70%:

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник