У меня есть таблица со следующими требованиями:
- Все столбцы должны иметь переменную ширину
- Все столбцы не должны занимать больше ширины, чем необходимо
- Все ячейки должны сохранять пробелы (пробелы: предварительная / предварительная переноска)
- Все ячейки должны переноситься, когда (и только когда) превышение максимально определенной ширины (1000 пикселей)
У меня проблемы с выполнением правила № 4.
Пока вся ширина таблицы умещается на экране, проблем нет.Тем не менее, когда доступное пространство будет превышено, браузер сделает все, чтобы подогнать его, обернув его раньше, чем я намереваюсь.Кроме того, меньшие столбцы уменьшатся в ширине и начнут перенос.
CSS:
table {
width: auto;
}
table td {
max-width: 1000px !important;
white-space: pre-wrap;
word-break: break-word;
word-wrap: break-word;
}
HTML:
<table border="1">
<tr>
<td>Small text, should not wrap</td>
<td>Long text, should wrap at 1000px only; [...]</td>
</tr>
</table>
Пожалуйста, отметьте это JSFiddle
Я использую white-space:pre-wrap, потому что содержимое должно иметь возможность переноситься, даже если исходные данные не содержат перевода строки.Когда я использую white-space:pre, ширина столбца будет точно правильной, но, очевидно, содержимое будет выходить за пределы ячейки.Я пытался преодолеть это, добавив overflow-wrap:break-word, но это не сработало ..