Таблица должна иметь максимальную ширину 200 пикселей, тогда только она должна быть обернута ⇐ CSS

[Anonymous]

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

.table_outer {
width: 500px;
overflow-x: auto; /* Allow horizontal scrolling */
}
table {
width: 100%;
min-width: max-content; /* Ensure table doesn't shrink below content width */
table-layout: fixed; /* Enforce fixed width for cells */
border-collapse: collapse;
border: 1px solid black;
}
table th,
table td {
border: 1px solid black;
padding: 8px;
max-width: 264px; /* Set max width for cells */
white-space: normal; /* Allow wrapping */
overflow-wrap: break-word; /* Wrap long words */
word-break: break-word; /* Ensure word breaks */
box-sizing: border-box; /* Include padding and border in width/height */
}

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

Document









name
role
city
city
city
city




raja shekar sivanna
software engineer
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india


hiran limbasia hiren
software engineer
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india


prajwal bhanasai katakam
software engineer
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india


prajwal bhanasai katakam
software engineer
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india


prajwal bhanasai katakam
software engineer
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india
hsr layout sector 6 banglore karnataka india

таблица td не принимает максимальную ширину 264 пикселя, она занимает меньшую ширину и он получает перенос,
потому что таблица автоматически пытается отрегулировать ширину, зависит от внешней ширины таблицы.
если внешняя ширина таблицы составляет 100% экрана, это означает, что ширина таблицы больше этой ширины. пытаюсь отрегулировать ширину ячеек и обернуть содержимое.
но я не хочу обертывать таблицу до того, как содержимое достигнет максимальной ширины 264 пикселей, она должна принять максимальную ширину, тогда произойдет переполнение, которое она может обернуть.

Подробнее здесь: https://stackoverflow.com/questions/785 ... hould-wrap