Атрибут width тега <colgroup> — ширина групи колонок

Атрибут width тега <colgroup> задає попередню ширину групи колонок.

Якщо загальна ширина вмісту перевищує зазначену ширину, то браузер буде намагатися «втиснутися» в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в колонці знаходяться зображення, атрибут width буде проігнорований, і нова ширина колонки буде обчислена на основі її вмісту.

правити

Загальний опис

правити

Нотатка

Цей атрибут буде проігнорований, якщо ширина для колонки встановлена за допомогою елемента <col>.

автор: Wsewlad правити

+ додати пораду чи нотатку

Синтаксис

<colgroup width="pixels|%|relative_lngth">

Атрибут width може отримувати 3 значень:

pixels

Ширина в пікселях

автор: NagarD

правити

%

Ширина в відсотках

автор: NagarD

правити

relative_length

Зазвичай застосовується будь-яке ціле значення в пікселях або відсотках загального обсягу простору. Альтернативний варіант заснований на використанні символу , який позначає всю доступну ширину. Допустимо використовувати кратні значення, наприклад 3 . Наприклад, якщо для таблиці встановлена ширина 600 пікселів, а для колонок - 1 , 2 , то в пікселях це буде відповідно 200 і 400. При використанні подібних одиниць браузеру потрібно завантажити таблицю цілком, щоб обчислити необхідну ширину клітинок, що призводить до затримки виведення великих таблиць.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	≤4	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3.2

Приклади

+ запропонувати свій приклад у пісочниці

<p class="cap">1. Звичайна таблиця: width="200" на групі дає рівно 200 пікселів</p>
<table>
    <colgroup width="200"></colgroup>
    <colgroup></colgroup>
    <tr><th>Місто</th><th>Населення</th></tr>
    <tr><td>Київ</td><td>2 952 000</td></tr>
</table>

<p class="cap">2. span="2" width="120" — по 120 пікселів КОЖНІЙ колонці, разом 240</p>
<table>
    <colgroup span="2" width="120"></colgroup>
    <colgroup></colgroup>
    <tr><th>Місто</th><th>Область</th><th>Населення</th></tr>
    <tr><td>Київ</td><td>Київська</td><td>2 952 000</td></tr>
</table>

<p class="cap">3. width="100", але вміст не вміє стискатися — колонка розсунулась</p>
<table>
    <colgroup width="100"></colgroup>
    <colgroup></colgroup>
    <tr><th>Слово</th><th>Населення</th></tr>
    <tr><td>Нерозривнеслововякогонемаєжодногопробілу</td><td>2 952 000</td></tr>
</table>

<p class="cap">4. table-layout: fixed — width на групі не діє, а на col діє</p>
<table class="fixed">
    <colgroup width="200"></colgroup>
    <colgroup></colgroup>
    <tr><th>Група: 200 проігноровано</th><th>Друга</th></tr>
    <tr><td>Київ</td><td>2 952 000</td></tr>
</table>
<table class="fixed">
    <colgroup><col width="200"><col></colgroup>
    <tr><th>col: 200 працює</th><th>Друга</th></tr>
    <tr><td>Київ</td><td>2 952 000</td></tr>
</table>

<p class="cap">5. Сучасна заміна: width у стилях на самій групі</p>
<table>
    <colgroup class="w200"></colgroup>
    <colgroup></colgroup>
    <tr><th>Місто</th><th>Населення</th></tr>
    <tr><td>Київ</td><td>2 952 000</td></tr>
</table>

.cap {
    margin: 22px 0 6px;
    max-width: 620px;
    color: #5a6472;
    font-size: .92em;
}

table {
    width: 600px;
    max-width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
}

td,
th {
    padding: 6px 10px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef3fb;
}

.fixed {
    table-layout: fixed;
}

.w200 {
    width: 200px;
}

<table>
    <colgroup width="200"></colgroup>
    <tr><th>Місяць</th><th>Витрати</th></tr>
    <tr><td>Січень</td><td>100 грн</td></tr>
    <tr><td>Лютий</td><td>80 грн</td></tr>
</table>

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid #0172ad;
    padding: 4px 10px;
}