Перейти к содержанию

table-layout

Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Демо

Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

Значения

auto

Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.

fixed

Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Значение по-умолчанию: auto

Применяется к тегу <table> или к элементу, у которого значение display установлено как table или inline-table.

Спецификации

Поддержка браузерами

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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>

Комментарии