Добавить новую таблицу в строку существующей

Question

Есть 2 html таблицы. Первая представляет список объектов, вторая детальную информацию об отдельном. Количество столбцов в обеих отличается. Первая отображается сразу при загрузке страницы, вторая может подгружается динамически, по выбору пользователя. Я пытаюсь создать новую tr в первой таблице как на скрине :

и вставить в tr вторую таблицу table.

Пусть 2-я таблица будет :

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Добавление 2й таблицы происходит через JS но можно и в ручную, как на скрине :

В результате получается структура, в которой пустая tr первой таблицы(куда хотел вставить table) остается пустой, а строки tr второй таблицы просто добавляются в первую. Скрин :

В этом не было бы проблемы, но число столбцов у таблиц различно, из за этого, выделенные на скрине желтым, строки просто займут 3 столбца от первой таблицы, а остальное пространство останется пустым, как то так :

Примерно тоже самое, будет если вместо пустой tr пытаться вставить table в <tr><td></td></tr>. Только тогда вторая таблица займет пространство столбца bla-1. Как сделать, что бы 2 таблица по ширине совпадала с 1й, даже если у них различное число столбцов?

Answer 1

Если это ASP.NET Core, то возможно вам нужно создать сначала частичное представление для вывода данных в табличной форме, а для этого тоже нужна модель или вьюмодель. И тогда, после того как все строки первой таблицы были загружены и показаны, кликнув на строку вы добавляете на страницу отображение этого частичного представления. А что бы строки по ширине совпадали, посмотрите как в бутстрап задаются ширина класса, и нужно чтобы класс второй таблицы был таким же как и первой, то есть,

<table class="table table-striped points-table">

И что бы вторая таблица растягивалась на все 12 блоков бутстрапа также. И для красоты, в первой таблице можно добавить класс table-hover, чтобы строка при наведении подсвечивалась. Так что вторая таблица может быть такой

<table class="table table-striped points-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вот в этом репозитории, рабочий код приложения на ASP.NET Core MVC для .NET 5, где используется оформление таблиц с Bootstrap 5. А во втором репозитории, реализация продвинутых концепций ASP.NET Core, а также наведение красоты для таблиц с помощью Font Awesome.

Answer 2

В <tr> нельзя вставлять таблицу, можно только в <td> и <th>. Если надо сделать таблицу на всю строку <tr> то можно создать ячейку <td> с атрибутом colspan="xx", в котором указать количество ячеек в строке (как сделано в самом низу примера).

table,
td {
  border: 1px solid #00f;
}

<table>
  <tr>
    <th>
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
        </tr>
      </table>
    </th>
    <th>HEADER</th>
  </tr>
  <tr>
    <td>
      Some cell
    </td>
    <td>
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
          <td>3a</td>
          <td>4a</td>
          <td>5a</td>
          <td>6a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
          <td>3b</td>
          <td>4b</td>
          <td>5b</td>
          <td>6b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Другой пример на colspan и rowspan:

table,
td {
  border: 1px solid #00f;
}

td {
  width: 5rem;
  height: 5rem;
  text-align: center;
  font-size: 2.5rem;
}

td[colspan="2"] {
  width: 10rem;
}

td[rowspan="2"] {
  height: 10rem;
}

<table>
  <tr>
    <td rowspan="2"> 1 </td>
    <td colspan="2"> 2 </td>
  </tr>
  <tr>
    <td> 3 </td>
    <td rowspan="2"> 4 </td>
  </tr>
  <tr>
    <td colspan="2"> 5 </td>
  </tr>
</table>

БЛОГ НА HUSL

Добавить новую таблицу в строку существующей

Ответы (2 шт):