Versuchen Sie, eine maximale Breite auf eine Textspalte in einer Tabelle zu setzen. Die Schriftrollen horizontal? ⇐ HTML

[Anonymous]

Ist es möglich, eine maximale Breite auf den dritten einzustellen, so dass die erste Tabelle mit dieser maximalen Breite einwickelt, und die zweite Tabelle nicht einmal diese Breite erreicht, sondern einfach in den Inhalt passt? Die dritte Spalte wickelt sich auf nahezu jedes Wort ein. Aus diesem Grund hat eine minimale Breite ausprobiert.
Der Stil von Max-Content erlaubt kein Einwickeln. Somit muss ein Satz von Stilen für beide funktionieren. < /p>
Danke.

Code: Select all

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>
Ich war dumm; Das Hinzufügen einer Division innerhalb des TD führt zu dem gewünschten Ergebnis.  Aber gibt es eine Möglichkeit, das gleiche ohne das hinzugefügte Div-Tag zu erhalten?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