HTML Таблица Форматирование: 2 Объединение столбцов ячейки путает ширину столбца

Question

Так что у меня есть следующий HTML:

<table> 
    <tr> 
    <th>Heading:</th><td>text</td> 
    </tr> 
    <tr> 
    <th>Heading 2:</th><td>text</td> 
    </tr> 
    <tr> 
    <th colspan="2">Really long heading:</th> 
    </tr> 
    <tr> 
    <td></td><td>text</td> 
    </tr> 
</table> 

Это создает таблицу с двумя столбцами, один для заголовков (слева) и один для значений (справа) - за исключением одной строки, где длинный заголовок занимает оба столбца, а значение отображается в правой колонке в следующей строке. Наряду с этим у меня есть стиль; самое главное:

td:last-child { 
    width: 100%; 
} 

th, td { 
    white-space:nowrap; 
} 

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

Answer 1

Вы не можете определить ширину: 100% ячейки таблицы с несколькими столбцами. Вы должны использовать COLGROUP тег, чтобы определить ширину ячейки:

.col-left { 
 
    width: 20%; 
 
} 
 
.col-right { 
 
    width: 80%; 
 
}

<table> 
 
    <colgroup> 
 
    <col class="col-left"> 
 
    <col class="col-right"> 
 
    </colgroup> 
 
    <tr> 
 
    <th>Heading:</th><td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">Really long heading:</td> 
 
    </tr> 
 
    <tr> 
 
    <th>lorem ispum dolores hello</th><td>text</td> 
 
    </tr> 
 
</table>

Других уловки, чтобы установить ячейку на минимуме и, очевидно, еще одна клетки взять остальную часть ширины, которые, чтобы установить первый один в 1px:

table { 
 
    width: 200px; 
 
} 
 
th, td { 
 
    border: 1px solid #000; 
 
} 
 
th { 
 
    width:1px; 
 
}

<table> 
 
    <tr> 
 
     <th>hello</th> 
 
     <td>world</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">hi</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>text</td> 
 
    </tr> 
 
</table>