table-layout¶
Свойство table-layout
определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Колонки и таблицы
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
- vertical-align
Синтаксис¶
/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;
Значения¶
auto
- Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.
fixed
- Ширина колонок в этом случае определяется либо с помощью тега
<col>
, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
Значение по-умолчанию: auto
Применяется к тегу <table>
или к элементу, у которого значение display
установлено как table
или inline-table
.
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-layout</title>
<style>
table {
table-layout: fixed; /* Фиксированная ширина ячеек */
width: 100%; /* Ширина таблицы */
}
.col1 {
width: 160px;
}
.coln {
width: 60px;
}
</style>
</head>
<body>
<table border="1">
<col class="col1" />
<col span="9" class="coln" />
<tr>
<td></td>
<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>
<tr>
<td>Нефть</td>
<td>5</td>
<td>7</td>
<td>2</td>
<td>8</td>
<td>3</td>
<td>34</td>
<td>62</td>
<td>74</td>
<td>57</td>
</tr>
<tr>
<td>Золото</td>
<td>3</td>
<td>6</td>
<td>4</td>
<td>6</td>
<td>4</td>
<td>69</td>
<td>72</td>
<td>56</td>
<td>47</td>
</tr>
<tr>
<td>Дерево</td>
<td>5</td>
<td>8</td>
<td>3</td>
<td>4</td>
<td>7</td>
<td>73</td>
<td>79</td>
<td>34</td>
<td>86</td>
</tr>
</table>
</body>
</html>