Как синхронизировать ширину ячеек в таблице под ширину других ячеек из другой таблицы
У меня есть несколько таблиц. В одном ряду три таблицы. Под одной(первой) таблицей ещё две. Мне нужно, чтобы ячейки этих трёх таблиц(те, что под бетоном) были одной длины при изменении расширения экрана, но в первом ряду другие две таблицы не меняли своего размера.
* {
margin: 0;
box-sizing: border-box;
}
table {
padding-left: 30px;
padding-right: 30px;
}
td,
th {
border: 1px solid black;
}
.tables-wrapper {
display: flex;
align-items: flex-start;
}
td {
font-size: 120%;
} <div class="tables-wrapper">
<table>
<caption style="font-size: 130%">
Бетон
</caption>
<tbody>
<thead>
<tr>
<td>
Тип Бетона
</td>
<td>
Цена за 1м2
</td>
</tr>
</thead>
<tr>
<td>
Бетон M-100 / В 7.5 с пластификатором
</td>
<td>
3200р
</td>
</tr>
<tr>
<td>
Бетон M-150 / В 10 с пластификатором
</td>
<td>
3300р
</td>
</tr>
<tr>
<td>
Бетон M-200 / В 15 с пластификатором
</td>
<td>
3500р
</td>
</tr>
<tr>
<td>
Бетон M-250 / В 20 / W4-8
</td>
<td>
3800р
</td>
</tr>
<tr>
<td>
Бетон M-300 / В 22.5 / W4-8
</td>
<td>
4000р
</td>
</tr>
<tr>
<td>
Бетон M-350 / В 25 / W4-8
</td>
<td>
4200р
</td>
</tr>
<tr>
<td>
Бетон M-400 / В 30 с пластификатором
</td>
<td>
4600р
</td>
</tr>
<tr>
<td>
Бетон M-450 / В 35 с пластификатором
</td>
<td>
5000р
</td>
</tr>
<tr>
<td>
Бетон M-500 / В 40 с пластификатором
</td>
<td>
5200р
</td>
</tr>
</tbody>
</table>
<table>
<caption style="font-size: 130%">
Щебень
</caption>
<tbody>
<thead>
<tr>
<td>
Тип Песка
</td>
<td>
Цена за тонну
</td>
</tr>
</thead>
<tr>
<td>
Песок
</td>
<td>
1100р
</td>
</tr>
</tbody>
</table>
<table>
<caption style="font-size: 130%">
Другие стройматериалы
</caption>
<tbody>
<thead>
<tr>
<td>
Стройматериал
</td>
<td>
Цена за тонну
</td>
</tr>
</thead>
<tr>
<td>
Песок
</td>
<td>
1100р
</td>
</tr>
<tr>
<td>
Отсев
</td>
<td>
700р
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div>
<table>
<tbody>
<tr>
<td>
РОМ-50 на отсеве
</td>
<td>
2600р
</td>
</tr>
<tr>
<td>
РОМ-75 на отсеве
</td>
<td>
2700р
</td>
</tr>
<tr>
<td>
РОМ-100 на отсеве
</td>
<td>
2900р
</td>
</tr>
<tr>
<td>
РОМ-150 на отсеве
</td>
<td>
3300р
</td>
</tr>
<tr>
<td>
РОМ-200 на отсеве
</td>
<td>
3600р
</td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td>
РПМ-50 на песке
</td>
<td>
3400р
</td>
</tr>
<tr>
<td>
РПМ-75 на песке
</td>
<td>
3500р
</td>
</tr>
<tr>
<td>
РПМ-100 на песке
</td>
<td>
3600р
</td>
</tr>
<tr>
<td>
РПМ-150 на песке
</td>
<td>
4000р
</td>
</tr>
<tr>
<td>
РПМ-200 на песке
</td>
<td>
4200р
</td>
</tr>
</tbody>
</table>
</div>Ответы (1 шт):
Автор решения: De.Minov
→ Ссылка
Я бы сделал ещё одну таблицу и в ней бы разместил ваши, тем самым сохранив размер ячеек, относительно строк.
* {
margin: 0;
box-sizing: border-box;
}
.tables-wrap {
max-width: 100%;
}
.tables-wrap > thead {
font-size: 130%;
text-align: center;
}
.tables-wrap > tbody > tr {
vertical-align: top;
}
.tables-wrap table td {
width: 100%;
font-size: 120%;
border: 1px solid #000;
}<table class="tables-wrap">
<thead>
<td>Бетон</td>
<td>Щебень</td>
<td>Другие стройматериалы</td>
</thead>
<tbody>
<tr>
<td>
<table>
<tbody>
<thead>
<tr>
<td>Тип Бетона</td>
<td>Цена за 1м2</td>
</tr>
</thead>
<tr>
<td>Бетон M-100 / В 7.5 с пластификатором</td>
<td>3200р</td>
</tr>
<tr>
<td>Бетон M-150 / В 10 с пластификатором</td>
<td>3300р</td>
</tr>
<tr>
<td>Бетон M-200 / В 15 с пластификатором</td>
<td>3500р</td>
</tr>
<tr>
<td>Бетон M-250 / В 20 / W4-8</td>
<td>3800р</td>
</tr>
<tr>
<td>Бетон M-300 / В 22.5 / W4-8</td>
<td>4000р</td>
</tr>
<tr>
<td>Бетон M-350 / В 25 / W4-8</td>
<td>4200р</td>
</tr>
<tr>
<td>Бетон M-400 / В 30 с пластификатором</td>
<td>4600р</td>
</tr>
<tr>
<td>Бетон M-450 / В 35 с пластификатором</td>
<td>5000р</td>
</tr>
<tr>
<td>Бетон M-500 / В 40 с пластификатором</td>
<td>5200р</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<thead>
<tr>
<td>Тип Песка</td>
<td>Цена за тонну</td>
</tr>
</thead>
<tr>
<td>Песок</td>
<td>1100р</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<thead>
<tr>
<td>Стройматериал</td>
<td>Цена за тонну</td>
</tr>
</thead>
<tr>
<td>Песок</td>
<td>1100р</td>
</tr>
<tr>
<td>Отсев</td>
<td>700р</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>РОМ-50 на отсеве</td>
<td>2600р</td>
</tr>
<tr>
<td>РОМ-75 на отсеве</td>
<td>2700р</td>
</tr>
<tr>
<td>РОМ-100 на отсеве</td>
<td>2900р</td>
</tr>
<tr>
<td>РОМ-150 на отсеве</td>
<td>3300р</td>
</tr>
<tr>
<td>РОМ-200 на отсеве</td>
<td>3600р</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>РПМ-50 на песке</td>
<td>3400р</td>
</tr>
<tr>
<td>РПМ-75 на песке</td>
<td>3500р</td>
</tr>
<tr>
<td>РПМ-100 на песке</td>
<td>3600р</td>
</tr>
<tr>
<td>РПМ-150 на песке</td>
<td>4000р</td>
</tr>
<tr>
<td>РПМ-200 на песке</td>
<td>4200р</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>