Создать базовую таблицу с расширенной строкой

Question

Я использую Angular версии 6 и хочу либо решение Angular, либо чистое решение html / javascript для таблицы с расширенными строками.

Поэтому, когда вы щелкаете строку, она расширяется.

Примечание: я не хочу использовать угловой материал, jQuery или любое другое лицо.

Это моя HTML-таблица:

  <table class="ex-table p3">
    <thead class="ex-table__head">
      <tr class="ex-table__row">
        <th class="ex-table__cell">id</th>
        <th class="ex-table__cell">First Name</th>
      </tr>
    </thead>
    <tbody>
      <tr class="ex-table__row"  *ngFor="let item of data">
          <td class="ex-table__cell">
            {{item.od}}
          </td>
          <td class="ex-table__cell">
            {{item.firstName}}
          </td>
      </tr>
    </tbody>
  </table>

Я пытался использовать rowspan, colspan и вложенные таблицы, но это не получилось.