我有两个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个不同的行,而不是第一行中嵌入的行。第二张表显示我将第二行的前两列隐藏起来,需要将它们向上推到上一张表的行中。我希望可以使用一些属性/布局来尝试完成此任务。
任何建议都将不胜感激,因为我此时已陷入僵局。
更新 我已经能够在这方面走得更远,但是下一个问题是我需要该列实际占用高度,因此它将下一行向下推。这绝对是假冒身高的副作用,所以我认为我可能需要再次重新考虑。只是想将其发布以供后代使用。
.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>