0
Я хотел бы получить следующий макет в HTML, используя теги div вместо тегов таблицы (раскраска только для того, чтобы сделать более понятным, какие ячейки я хочу иметь равную ширину):Вставить таблицу div в таблицу div
То есть, я хотел бы иметь возможность развернуть макет таблицы в другой сервировки стола, используя только Div теги. Это возможно?
Ниже я включил один из моих экспериментов. Как видите, первый столбец становится слишком широким. Внутренняя таблица не охватывает всю ширину.
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
border-collapse: collapse;
}
.cell {
display: table-cell;
border-collapse: collapse;
padding: 2px 6px;
}
.yellow {
background-color: #ffdb4d;
}
.orange {
background-color: #ffa64d;
}
.red {
background-color: #ff6666;
}
.purple {
background-color: #b800e6;
}
.blue {
background-color: #66b3ff;
}
.green {
background-color: #70db70;
}<div class="table">
<div class="row">
<div class="cell yellow">cell11</div>
<div class="cell orange">cell21</div>
<div class="cell red">cell31</div>
<div class="cell purple">cell41</div>
</div>
<div class="row">
<div class="cell yellow">cell12</div>
<div class="cell orange">cell22</div>
<div class="cell red">cell32</div>
<div class="cell purple">cell42</div>
</div>
<div class="row">
<div class="cell yellow">cell13</div>
<div class="cell orange">cell23</div>
<div class="cell red">cell33</div>
<div class="cell purple">cell43</div>
</div>
<div class="table">
<div class="row">
<div class="cell blue">Some text:</div>
<div class="cell green">blah blah</div>
</div>
<div class="row">
<div class="cell blue">Some other text:</div>
<div class="cell green">blah blah blah</div>
</div>
</div>
<div class="row">
<div class="cell yellow">cell15</div>
<div class="cell orange">cell25</div>
<div class="cell red">cell35</div>
<div class="cell purple">cell45</div>
</div>
<div class="row">
<div class="cell yellow">cell16</div>
<div class="cell orange">cell26</div>
<div class="cell red">cell36</div>
<div class="cell purple">cell46</div>
</div>
</div>
Это честно имеет смысл использовать фактические элементы таблицы в этой точке. –