Нужна помощь. Лучше всего объяснит приложенная картинка + прилагаю код главной таблицы. Интересует как вставить сюда вторую таблицу, которая бы не нарушила целостность первой. Помогите пожалуйста, натолкните на правильный путь.
table {
width: 1200px;
border-spacing: 0 6px;
}
table thead tr {
height: 59px;
margin-top: -1px;
margin-bottom: -1px;
}
table thead tr th {
font-weight: 400;
color: #7f7f7f;
}
table thead tr th:nth-child(1) {
text-align: left;
padding-left: 18px;
}
table thead tr th:nth-child(2) {
text-align: left;
padding-left: 18px;
}
table tbody {
width: 1200px;
}
table tbody tr {
height: 48px;
background-color: #f8f8f8;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tbody tr td {
color: #202020;
text-align: center;
border-spacing: 0 6px;
}
table tbody tr td:nth-child(1) {
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: left;
padding-left: 18px;
}
table tbody tr td:nth-child(2) {
text-align: left;
}
table tbody tr td:nth-child(3) {
font-weight: 500;
}
table tbody tr td:nth-child(4) {
font-weight: 500;
}
table tbody tr td:nth-child(5) {
font-weight: 500;
color: #249509;
}
table tbody tr td:nth-child(2) {
padding-left: 18px;
}
table tbody tr td:nth-child(9) {
width: 58px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
table tbody tr td:nth-child(9) .arrow {
width: 11px;
height: 10px;
background-image: url(../img/orders_arrows.png);
margin: 0 auto;
}
<table>
<thead>
<tr>
<th>Дата</th>
<th>Номер</th>
<th>Сумма (руб)</th>
<th>Сумма ($)</th>
<th>Статус</th>
<th>Юридическое лицо</th>
<th>Транспортная компания</th>
<th>№ отправления</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>22.07.2018</td>
<td>1054010</td>
<td>100 050 руб.</td>
<td>1050 $</td>
<td>Выполнен</td>
<td>Фетисов Сергей</td>
<td>DHL Delivery</td>
<td>5900004142424</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>22.07.2018</td>
<td>1054010</td>
<td>100 050 руб.</td>
<td>1050 $</td>
<td>Выполнен</td>
<td>Фетисов Сергей</td>
<td>DHL Delivery</td>
<td>5900004142424</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>22.07.2018</td>
<td>1054010</td>
<td>100 050 руб.</td>
<td>1050 $</td>
<td>Выполнен</td>
<td>Фетисов Сергей</td>
<td>DHL Delivery</td>
<td>5900004142424</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>22.07.2018</td>
<td>1054010</td>
<td>100 050 руб.</td>
<td>1050 $</td>
<td>Выполнен</td>
<td>Фетисов Сергей</td>
<td>DHL Delivery</td>
<td>5900004142424</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>