Соединение двух таблиц HTML, поэтому их строки рассматриваются в рамках одной таблицы - PullRequest
Новая
       7

Соединение двух таблиц HTML, поэтому их строки рассматриваются в рамках одной таблицы

0 голосов
/ 12 декабря 2018

У меня есть две таблицы 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>
...