Пытаетесь установить максимальную ширину в столбец текста в таблице, прокрутки горизонтально? ⇐ Html

[Anonymous]

Можно ли установить максимальную ширину третьему таким, что первая таблица будет завершена при этой максимальной ширине, а вторая таблица даже не достигнет этой ширины, а просто подходит для содержания? Более широкий, чем его родительский элемент и все другие столбцы, установлены для того, чтобы не обернуть), 3 -й столбец оборачивается практически на каждом словом. Вот почему попробовал минимальную ширину.
Стиль Max-content не позволит обернуть. Таким образом, один набор стилей должен работать для оба.

Код: Выделить всё

div {
width:500px;
overflow-x:auto;
overflow-y:auto;
border: 1px solid blue;
}

table {
border-collapse: collapse;
margin-bottom: 20px;
}
thead {
background-color: rgb(200,200,200);
}

th,td {
border: 1px solid gray;
padding: 10px 20px;
}

td:not(:nth-child(3)) {
white-space: nowrap;
}

table col:nth-child(3) {
min-width:300px;
}

/*
table.cat_1 {
width: max-content;
}

table.cat_1 col:nth-child(3) {
max-width: 200px;
}
*/< /code>







Id
Size
Text
Col 4
Col 5
Col 6
Col 7




1001
2028
A line of text that exceeds the desired maximum width of third column.
td 4 data
td 5 data
td 6 data
td 7 data









Id
Size
Text
Col 4
Col 5
Col 6
Col 7




1001
2028
A short line.
td 4 data
td 5 data
td 6 data
td 7 data



< /code>
< /div>
< /div>
< /p>
Я был глуп; Просто добавление подразделения внутри TD дает желаемый результат.  Но есть ли способ получить то же самое без добавленного тега Div?div {
width:500px;
overflow-x:auto;
overflow-y:auto;
border: 1px solid blue;
}

table {
border-collapse: collapse;
margin-bottom: 20px;
}
thead {
background-color: rgb(200,200,200);
}

th,td {
border: 1px solid gray;
padding: 10px 20px;
}

td:not(:nth-child(3)) {
white-space: nowrap;
}

div.text {
width: max-content;
max-width:200px;
}< /code>







Id
Size
Text
Col 4
Col 5
Col 6
Col 7




1001
2028
A line of text that exceeds the desired maximum width of third column.
td 4 data
td 5 data
td 6 data
td 7 data









Id
Size
Text
Col 4
Col 5
Col 6
Col 7




1001
2028
A short line.
td 4 data
td 5 data
td 6 data
td 7 data

Подробнее здесь: https://stackoverflow.com/questions/795 ... orizontall