Я хотел бы иметь таблицу с заголовками слева, заголовки должны быть как можно более узкими, а пространство для значений должно занимать остальную часть ширины страницы. Заголовки должны быть на одной строке, если содержимое ячейки заголовка не очень длинное, и в этот момент заголовок должен быть перенесен на несколько строк.
С коротким контентом это работает:
<table border="1">
<tr>
<th>Short Header</th>
<td>value</td>
</tr>
<tr>
<th>Quite Long Header</th>
<td>value</td>
</tr>
</table>
CSS
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
white-space: nowrap;
}
Однако, когда я пытаюсь добавить максимальную ширину, вместо обертывания содержимое выгружается из текстового поля:
table {
width: 100%;
}
th {
text-align: right;
width: 10px;
white-space: nowrap;
max-width: 300px;
word-break: break-all;
}
Демо: https://jsfiddle.net/2avm4a6n/
Кажется, стиль white-space: nowrap;
переопределяет word-break: break-all;
, поэтому max-width: 300px;
вызывает выпадение текста. Я использую комбинацию white-space: nowrap;
и width: 10px;
, чтобы сделать столбец заголовка как можно более узким, без обертывания заголовков с пробелами ниже минимальной ширины, но наличие только width: 10px;
и word-break: break-all;
приводит к тому, что заголовки оберните в отдельные символы, чтобы они соответствовали узким 10px.
Любая идея, как это сделать с помощью css?