Чтобы добиться того, чтобы элемент `<select>` занимал оставшуюся ширину в родительском элементе без использования дополнительных обёрток и с применением свойства `display: table`, можно использовать следующий подход:
1. Задать родителю `display: table; width: 100%;`.
2. Для элемента `<select>` применить `display: table-cell; width: 100%;`.
3. Для любых других элементов в родительском элементе, которые должны занимать только необходимое пространство, применить `display: table-cell; white-space: nowrap;`.
Ниже пример кода, демонстрирующий такую верстку:
HTML:
```html
<div class="table">
<div class="cell fixed">Элемент с фиксированной шириной</div>
<select class="cell stretch">
<option>Выберите значение</option>
</select>
<div class="cell fixed">Ещё один элемент</div>
</div>
```
CSS:
```css
.table {
display: table;
width: 100%;
table-layout: fixed; /* Равномерно распределить пространство между ячейками */
}
.cell {
display: table-cell;
}
.cell.fixed {
white-space: nowrap; /* Запрет переноса содержимого */
}
.cell.stretch {
width: 100%; /* Занять оставшееся пространство */
}
```
В этом примере `<select>` растянется, чтобы занять доступное пространство, исключая то, которое заняты фиксированными элементами `.fixed`. У фиксированных элементов свойство `white-space: nowrap` предотвращает перенос строк и заставляет их занимать только столько места, сколько необходимо для их содержимого.
Обратите внимание, что в связи с особенностями отображения таблиц в браузерах, использование `table-layout: fixed;` на родительском элементе поможет избежать некоторых нежелательных эффектов, например, когда содержимое одной ячейки может сильно влиять на ширину соседних ячеек. Это свойство заставляет ячейки иметь фиксированную ширину, независимо от содержимого внутри них, за исключением ячейки со свойством `width: 100%;`, которая займёт все оставшееся пространство.