Самый простой способ получить таблицу в css, какой из столбцов не имеет явной ширины (но переносит содержимое), а другие - с фиксированной шириной?

Question

У меня две таблицы, каждая из которых занимает 50% экрана, обе выглядят одинаково. Каждая таблица содержит три столбца. Первый столбец не имеет явной ширины, которая занимает все доступное пространство. Два других столбца имеют фиксированную ширину независимо от размера экрана. Я хочу, чтобы содержимое третьего столбца было перенесено.

Я пытался использовать сетку для построения таблицы следующим образом:

display: grid;
grid-template-columns: auto 80px 60px;

И я использую flex в первом столбце, как это:

display: flex;
align-items: center;
flex-grow: 1;
flex-wrap: wrap;

Этот код хорошо работает, если содержимое первого столбца не переполняется, однако содержимое будет переполнено, если содержимое первого столбца слишком длинное (возможно, из-за того, что flex-wrap не будет работать без явной ширины, но Мне нужен первый столбец (без явной ширины) с обернутым содержимым, чтобы заполнить оставшееся пространство ).

Мне интересно, , если это должно быть достигнуто с помощью flex / table / grid, и как обработать первый столбец (это вообще возможно?) С помощью css .

Вот два изображения таблиц на другом экране (первый экран меньшего размера, второй экран большего размера)

Answer 1

Я бы порекомендовал использовать word-break, чтобы "установить, будут ли разрывы строк появляться везде, где текст в противном случае будет переполнять поле содержимого."

Доступно значения :

• normal - «Использовать правило разрыва строки по умолчанию.»
• break-all - "Чтобы избежать переполнения, между любыми двумя символами (кроме текста на китайском / японском / корейском) следует вставлять разрывы слов."
• keep-all - «Разрывы слов не должны использоваться для текста на китайском / японском / корейском (CJK). Поведение текста, отличного от CJK, такое же, как и для normal.» *
• break-word - "Чтобы предотвратить переполнение, обычно неразрывные слова могут быть разбиты в произвольных точках, если в строке нет других приемлемых точек разрыва."

Примечание от документов:

В отличие от word-break: break-word и overflow-wrap: break-word, word-break: break-all создаст разрыв в том месте, где в противном случае текст мог бы переполнить свой контейнер (даже если размещение целого слова в отдельной строке устранит необходимость в разрыве ).