连接两个HTML表,因此在一个表布局下考虑它们的行

时间:2018-12-12 15:58:18

标签: html css extjs html-table extjs6

我有两个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>

0 个答案:

没有答案