Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Дата:13.10.15 в 11:07
Раздел: 

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

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

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

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

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

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

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

HTML:

<!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>

CSS:

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

Таблица ограниченной ширины

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

Важно!!!

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

table-layout: fixed 

Оценок: 12 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)