Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО TABLE-LAYOUT

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

Поддержка браузеров

Синтаксис

table-layout: auto|fixed|initial|inherit

Значения свойства

Значение	Описание
auto	Браузер сам определяет ширину столбцов.
fixed	Браузер использует алгоритм фиксированной таблицы. Ширина таблицы и столбца задается шириной элементов `<table>` и `<col>` или шириной первого ряда ячеек. Ячейки в последующих строках не влияют на ширину столбцов.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<table class="table-1">
    <tr>
        <th>&nbsp;</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>Игрок 1</th>
        <td>Попадание</td>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Попадание</td>
    </tr>
    <tr>
        <th>Игрок 2</th>
        <td>Попадание</td>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Промах</td>
    </tr>
    <tr>
        <th>Игрок 3</th>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Попадание</td>
    </tr>
</table>

<table class="table-2">
    <tr>
        <th>&nbsp;</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    <tr>
        <th>Игрок 1</th>
        <td>Попадание</td>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Попадание</td>
    </tr>
    <tr>
        <th>Игрок 2</th>
        <td>Попадание</td>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Промах</td>
    </tr>
    <tr>
        <th>Игрок 3</th>
        <td>Попадание</td>
        <td>Промах</td>
        <td>Промах</td>
        <td>Попадание</td>
        <td>Попадание</td>
    </tr>
</table>

HTML

table {
  border-collapse: collapse;
  border: 1px solid #ddd;
  margin-bottom: 20px
} 

th,td {
  border: 1px solid #ddd;
  padding: 5px 7px;
}

.table-1, .table-2 {
    width: 300px
}

.table-1 {
    table-layout: auto
}

.table-2 {
    table-layout: fixed
}

CSS

← Перейти к списку свойств