Есть ли способ предотвратить расширение таблицы, прошедшая исходную ширину родителей без таблицы: исправлена? ⇐ Html

[Anonymous]

У меня есть таблица с двумя столбцами, которую я хотел бы, чтобы первый размер столбцов соответствовал максимальному контенту и второму столбцу, чтобы занять оставшееся пространство. Ни один столбец не имеет определенной абсолютной или процентной ширины. Мне также нужна таблица, чтобы быть фиксированной шириной, и не расширять родительский элемент. Overflow не работает, так как элемент таблицы расширяется, чтобы соответствовать контенту после ширины родительского элемента. Если я использую Table-Layout: исправлена ​​с шириной на 100%, таблица ограничена родительской шириной, но я больше не могу использовать Max-Content для размера первого столбца и иметь второй столбец занимать оставшееся пространство. /p>
Примеры:
https://jsfiddle.net/jmvs5gfq/1/


div {
width:600px;
border:1px solid blue;
}

table {
border-collapse: collapse;
width: 100%;
}

td {
border: 1px dotted black;
white-space:nowrap;
}

td:first-of-type {
min-width: max-content;
}

td:last-of-type {
overflow: hidden;
text-overflow: ellipsis;
}
.fixed {
table-layout: fixed;
}< /code>


Entry 1:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Entry 23:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Entry 487248231:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."



Entry 1:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Entry 23:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Entry 487248231:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

< /code>
< /div>
< /div>
< /p>
Первый Div содержит таблицу, которая ограничена Div, с переполнением Применение правильно, но размеры столбцов абсолютные. Установка размеров столбцов на 1% или 100% не учитывает содержимое, за таблицу Layout: исправлено. Max-Content игнорируется. < /p>
Второй Div содержит таблицу, которая расширяет мимо родительского Div. Первый столбец - это правильный размер, расширяющийся в соответствии с контентом. Второй столбец расширяет всю таблицу, чтобы соответствовать, вместо переполнения, что нежелательно.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ut-table-l