Гибкая ширина в таблице HTML
Я хотел бы, чтобы моя таблица выполняла следующие свойства:
- Ширина таблицы составляет 100% ширины родительского контейнера.
- Ширина всех столбцов соответствует максимальной ширине столбца.
- Столбец
flex-columnзанимает оставшееся место.
На рисунке средний столбец занимает оставшееся горизонтальное пространство, а ширина остальных столбцов соответствует их содержимому.
Я играл с Flexbox и CSS Grid, но пока не смог добиться никакого результата. Каков правильный метод?
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th,
td {
padding: 8px;
border: 1px solid black;
}
th.flex-column,
td.flex-column {
width: auto;
}
th:not(.flex-column),
td:not(.flex-column) {
white-space: nowrap;
}<table>
<thead>
<tr>
<th>A</th>
<th class = "flex-column">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan = "3">foo</td>
<td class = "flex-column">2</td>
<td>3</td>
</tr>
<tr>
<td class = "flex-column">4</td>
<td>5</td>
</tr>
<tr>
<td class = "flex-column">6</td>
<td>7</td>
</tr>
</tbody>
</table>Пожалуйста, проверьте tds, которые вы отметили как «гибкий столбец» — на самом деле они не все находятся в одном столбце (2 находится в столбце B, а не в столбце C).
@AHaworth Ты прав :)
@MarkSchultheiss Я обновил то, что пробовал.
Что вы подразумеваете под «оставшимся пространством»? Если для столбцов (независимо от их количества) установлена максимальная ширина, места не останется. Только один столбец может использовать всю ширину.
Возможно, предоставьте визуальное представление желаемых результатов.
@kzi Действительно, только один столбец может быть flex-column
по «подогнать к максимальной ширине столбца». Вы хотели сказать, возможно, «максимальный размер ширины содержимого в столбце?»
Напоминаем: таблица HTML поначалу гибкая в отношении ширины (и высоты) table-layout:fixed; убивает ее. Кроме того, width:0 в ячейке уменьшит ее настолько, насколько это возможно, если содержимое таблицы не установлено фиксированным. Также таблицы снабжены тегами colgroup/col, которые позволяют легко изменять размер и раскрашивать столбцы. codepen.io/gc-nomade/pen/rNEOvLB этот комментарий для завершения ответа @johannes :)
Ответы 3
Удалите table-layout: fixed, используйте очень маленькое фиксированное значение для боковых столбцов и, возможно, также используйте white-space: nowrap; на них, если вы хотите, чтобы их содержимое не переносилось. Ширина не будет оставаться на этом фиксированном значении, но при необходимости ее можно будет изменить.
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 8px;
border: 1px solid black;
}
th.flex-column,
td.flex-column {
text-align: left;
}
th:not(.flex-column),
td:not(.flex-column) {
white-space: nowrap;
width: 6px;
}<table>
<thead>
<tr>
<th>A</th>
<th class = "flex-column">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan = "3">foo</td>
<td class = "flex-column">2</td>
<td>3</td>
</tr>
<tr>
<td class = "flex-column">4</td>
<td>5</td>
</tr>
<tr>
<td class = "flex-column">6</td>
<td>7</td>
</tr>
</tbody>
</table>Здесь вы зафиксировали размер столбца на 8 пикселей, но столбец B должен занять оставшееся пространство. Изменение td.flex-column на auto не работает :(
@nowox обратите внимание, что я полностью изменил свой ответ (я изначально неправильно понял ваш вопрос, ваше изображение желаемого результата прояснило его)
Установка ширины гибкого столбца на 100 % будет работать.
Этот фрагмент оборачивает таблицу в элемент div, чтобы продемонстрировать, что таблица может принимать ширину родительского элемента.
.container {
width: 50vw;
}
table {
table-layout: fixed;
border-collapse: collapse;
}
th,
td {
padding: 8px;
border: 1px solid black;
width: auto;
}
th.flex-column,
td.flex-column {
width: 100%;
}
th:not(.flex-column),
td:not(.flex-column) {
white-space: nowrap;
}
</div><div class = "container">
<table>
<thead>
<tr>
<th>A</th>
<th class = "flex-column">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan = "3">foo</td>
<td class = "flex-column">2</td>
<td>3</td>
</tr>
<tr>
<td class = "flex-column">4</td>
<td>5</td>
</tr>
<tr>
<td class = "flex-column">6</td>
<td>7</td>
</tr>
</tbody>
</table>body {
width: 100vw;
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 8px;
border: 1px solid black;
width: auto;
align-self: flex-start;
text-align: start;
}
th.flex-column,
td.flex-column {
width: 100%;
}
th:not(.flex-column),
td:not(.flex-column) {
white-space: nowrap;
}<table>
<thead>
<tr>
<th>A</th>
<th class = "flex-column">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan = "3">foo</td>
<td class = "flex-column">2</td>
<td>3</td>
</tr>
<tr>
<td class = "flex-column">4</td>
<td>5</td>
</tr>
<tr>
<td class = "flex-column">6</td>
<td>7</td>
</tr>
</tbody>
</table>Вы упомянули сетку, вот пример.
Я добавил обертку в CSS просто для удобства, но это может быть и класс в таблице. Обратите внимание, как я использовал строки сетки на foo и также поместил их вверху блока.
body {
width: 100vw;
margin: 0;
padding: 0;
font-size: 16px;
}
.wrapper {
width: 100vw;
}
/* make these rows all apear to be direct children of table element */
.wrapper thead,
.wrapper thead>tr,
.wrapper tbody,
.wrapper tbody>tr,
.wrapper tfoot,
.wrapper tfoot>tr {
display: contents;
}
table {
border: solid #d000d0 1px;
border-collapse: collapse;
display: grid;
grid-template-columns: auto 1fr auto;
justify-content: start;
text-align: left;
}
.rowspan3 {
grid-row: 2 / 5;
}
.wrapper th,
.wrapper td {
padding: 0.5em;
border: 1px solid black;
width: minmax( min-content, 1fr);
}
.wrapper .flex-column,
.wrapper .flex-column {
grid-column: 2;
}
.wrapper th:not(.flex-column),
.wrapper td:not(.flex-column) {
white-space: nowrap;
}<div class = "wrapper">
<table>
<thead>
<tr>
<th>A</th>
<th class = "flex-column">B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "rowspan3">foo</td>
<td class = "flex-column">2</td>
<td>3</td>
</tr>
<tr>
<td class = "flex-column">4</td>
<td>5</td>
</tr>
<tr>
<td class = "flex-column">6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>Не уверен, важно ли ваше изображение, связанное с foo, находящимся в верхней части этого блока, но здесь центрируется rowspan=3 там; пара способов справиться с этим, ЕСЛИ это важно.
Возможно, обновите фрагмент, используя CSS, который вы пробовали, чтобы мы могли помочь его исправить.