Как вставить таблицу в таблицу в html с объединением нескольких столбцов - PullRequest
0 голосов
/ 01 мая 2020

Моя таблица html содержит несколько заявок от университетских групп.

В каждом университете могут быть разные группы. В каждой группе сейчас только один студент.

У меня есть html с angular кодом примерно так

    <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>State</th>
      <th>Group Name</th>
      <th>University</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="application in $ctrl.applications track by application.id"
      <td>
        <div ng-repeat="student in ::application.students track by $index">
          {{:: student.name }}
        </div>
      </td>
      <td>
        <div ng-repeat="student in ::application.students track by $index">
          {{:: student.address }}
        </div>
      </td>
      <td>
        <div ng-repeat="student in ::application.students track by $index">
          {{:: customer.state }}
        </div>
      </td>
      <td>{{:: application.groupName}}</td>
      <td>{{:: application.university }}</td>
    </tr>
  </tbody>
</table>

Это дает мне текущий результат как

enter image description here

Теперь изменилось требование.

В каждой группе может быть любое количество студентов. У каждого учащегося есть свой собственный адрес, штат.

Теперь таблица должна выглядеть примерно так:

enter image description here

Однако, если я передать измененные данные (если в одном приложении несколько студентов), я вижу это

enter image description here

Любая помощь очень ценится. Заранее спасибо.

Редактировать:

Пропустил упомянуть одну вещь раньше.

Весь ряд кликабелен.

Итак, во втором изображении (которое является желаемым выводом) я должен быть в состоянии одновременно нажать на Алекса и Стива, т. Е. Они должны рассматриваться как одна ячейка в таблице.

1 Ответ

0 голосов
/ 01 мая 2020

Я думаю, вам нужно rowspan:

https://www.w3schools.com/tags/att_td_rowspan.asp

Таким образом, вы можете объединять ячейки. Смотрите также на colspan, для столбцов.

...