У меня есть две таблицы HTML, и я хотел бы объединить их, чтобы они рассматривались как одна.Сама разметка не может быть изменена ... это должны быть две таблицы как братья и сестры.Причина, по которой разметка не может быть изменена, заключается в том, что я использую Ext JS в качестве своей JS-фреймворка, и именно так фреймворк выкладывает свои сетки.Я ошарашил это до ванильного HTML, и если я смогу понять это таким образом, я смогу реализовать его в рамках.Тем не менее, я не уверен, что это возможно, но мне было любопытно узнать, может быть, я пропустил свойство.
Пожалуйста, обратитесь к этому коду:
.my-table {
width: 100%;
table-layout: fixed;
}
.hide-column {
display: none;
}
td {
border: 1px solid #cecece;
}
<div>
<p>
This is how it should look
</p>
<table class="my-table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>Age</th>
</tr>
</table>
<table class="my-table">
<tr>
<td colspan=2 rowspan=2>Jill Smith<br />Eve Jackson</td>
<td class="hide-column">Smith</td>
<td>1234567890</td>
<td>50</td>
</tr>
<tr>
<td class="hide-column">Eve</td>
<td class="hide-column">Jackson</td>
<td>0987654321</td>
<td>94</td>
</tr>
</table>
</div>
<div>
<p>
This is what I'm working with (2 tables that need to be joined)
</p>
<table class="my-table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>Age</th>
</tr>
</table>
<table class="my-table">
<tr>
<td colspan=2 rowspan=2>Jill Smith<br />Eve Jackson</td>
<td class="hide-column">Smith</td>
<td>1234567890</td>
<td>50</td>
</tr>
</table>
<table class="my-table">
<tr>
<td class="hide-column">Eve</td>
<td class="hide-column">Jackson</td>
<td>0987654321</td>
<td>94</td>
</tr>
</table>
</div>
Первая таблица является иллюстрацией того, чего я пытаюсь достичь ... но я хочу, чтобы они рассматривались как 2 разные строки, а не как встроенные строкив первом ряду.Вторая таблица показывает, что я скрываю первые 2 столбца во второй строке, и их нужно перенести в строку предыдущей таблицы.Я надеялся, что есть какое-то свойство / макет, к которому я могу обратиться, чтобы попытаться выполнить это.
Буду признателен за любые предложения, поскольку на данный момент я зашел в тупик.
ОБНОВЛЕНИЕ Я смог немного продвинуться в этом, но следующая проблема заключается в том, что мне нужно, чтобы столбец фактически поднялся на высоту, поэтому он сдвигает следующий ряд вниз.Это определенно является побочным эффектом фальсификации высоты, поэтому я думаю, что мне, возможно, придется переосмыслить ее еще раз.Просто хотел опубликовать это для потомков.
.my-table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
.hide-column {
display: none;
}
td {
border: 1px solid #cecece;
white-space: nowrap;
}
.invisible-column {
visibility: hidden;
}
.thing {
border: none;
}
.thing > div {
outline: 1px solid #cecece;
height: 100%;
}
.thing > div > div {
height: 100px;
}
td {
height: 22px;
}
<div>
<table class="my-table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>Age</th>
</tr>
</table>
<table class="my-table">
<tr>
<td colspan=2 class="thing">
<div>
<div>
<div>Jill Smith</div>
<div>Jill Smith</div>
</div>
</div>
</td>
<td class="hide-column">Smith</td>
<td>1234567890</td>
<td>50</td>
</tr>
</table>
<table class="my-table">
<tr>
<td class="invisible-column">Eve</td>
<td class="invisible-column">Jackson</td>
<td>0987654321</td>
<td>94</td>
</tr>
</table>
<table class="my-table">
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>5555555555</td>
<td>904</td>
</tr>
</table>
</div>