Несколько таблиц с общим хедером

155

16 августа 2021, 06:10

Имеется следующий макет

Представляет из себя таблицу, разделенную на несолько подтаблиц, причем шапка таблицы общая для всех подтаблиц.

В чем заключается сложность.

Данные могут быть реактивные. Ширина колонок может меняться. При этом нужно, чтобы соответствующая ширина выставлялась для всех колонок во всех таблицах и для заголовков колонок в шапке одинаково.

Кроме того, таблица должна быть резиновой (с оговоркой о возможности горизонтального скролла при необходимости), а ширина колонок должна быть легко настраиваема без hardcoded-значений. Например, как это делается в CSS-гридах: minmax(min-content, 1fr).

Не прошу готовую реализацию, интересуют идеи того, как лучше это все дело реализовать. Какие технологии использовать.

Использовать JavaScript для модификации CSS разрешается в крайнем случае, но не приветствуется (особенно, если это совсем уж костыли).

Может кто сталкивался с чем-то подобным, хотелось бы услышать разные варианты, ибо я пока в тупике.

Ах, да, чуть не забыл. Что я думаю по этому поводу.

Первая мысль - гриды и использовать. Точнее, использовать один общий грид контейнер, дочерним элементам по необходимости ставить display: contents. Однако проблема очевидна - хедеры в подтаблицах. Насколько я знаю, display: contents не даст нормально зарендерить эти шапки. Кроме того, довольно специфический отступы. Между подтаблицами отступы одни, в строках другие, я пока слабо представляю как (и можно ли вообще) это сделать.

Другой вариант (пока остановился на нем) - сначала все зарендерить, а потом JS'ом найти самую широкую колонку среди всех таблиц и сделать эту колонку одинаковой для всех таблиц и для общего хедера. Но, во-первых, это уже костыли, во-вторых, я даже боюсь себе представить, что может пойти не так. Плюс, реактивные данные. Будет довольно дорого пересчитывать таким образом ширину(ы) каждый раз при изменении данных.

В общем, прошу поделиться, кто что думаю на этот счет.

Answer 1

Можно сделать всё это в рамках одной таблицы. Со стилизацией, конечно, придётся повозиться (в том числе как-нибудь решить вопрос растягивания дивов по высоте ячеек при разном объеме контента), но вот примерный вариант я Вам набросал на скорую руку:

body { 
  background-color: #F8FAFB; 
} 
table { 
  width: 100%; 
  min-width: 500px; 
  border-collapse: collapse; 
  background-color: white; 
} 
th, td { 
  border: 0; 
} 
th > div, 
td > div { 
  padding: 10px 15px; 
  border: 1px solid #E8ECEF; 
  margin: -1px; 
} 
th > div.first { 
  border-radius: 5px 0 0 0; 
} 
th > div.last { 
  border-radius: 0 5px 0 0; 
} 
th > div:not(.last), 
td > div:not(.last) { 
  border-right: none; 
} 
td > div.first { 
  margin-left: 10px; 
} 
td > div.last { 
  margin-right: 10px; 
} 
.inner-colspan { 
  background-color: #F8FAFB; 
  border-radius: 5px 5px 0 0; 
  margin: 15px 10px -1px; 
  border-left: 1px solid #E8ECEF; 
  border-top: 1px solid #E8ECEF; 
  border-right: 1px solid #E8ECEF !important; 
}

<table> 
  <tr> 
    <th><div class="first">number</div></th> 
    <th><div>prop name</div></th> 
    <th><div>bull name</div></th> 
    <th><div>unit name</div></th> 
    <th><div class="last">unit type</div></th> 
  </tr> 
  <tr> 
    <td colspan="5"> 
      <div class="inner-colspan">\/ 101 & 102</div> 
    </td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td colspan="5"> 
      <div class="inner-colspan">\/ 103</div> 
    </td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td colspan="5"> 
      <div class="inner-colspan">\/ 104</div> 
    </td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
  <tr> 
    <td><div class="first"></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div></div></td> 
    <td><div class="last"></div></td> 
  </tr> 
</table>