Как правильно отобразить таблицу внутри другой таблицы с помощью шаблонов Django

я использую таблицу для отображения значений в шаблоне django, и у меня есть вторичная таблица внутри моей основной таблицы (серая на картинке ниже) :

изображение моего стола

В двух таблицах используются одинаковые столбцы, и моя проблема в том, что столбцы не выровнены (например, ячейка "n" в моей первой строке не выровнена с моей ячейкой "n" во второй таблице, потому что значения не имеют одинакового размера, и будет трудно узнать, чем "n" является в столбце "n", когда у меня будут "реальные" значения)

(Я создал вторичную таблицу для решения этой проблемы: DJANGO - закрыть две кнопки коллапса одной, но если вы думаете, что есть лучший способ сделать это, и избежать моей проблемы выравнивания, не стесняйтесь сказать мне)

Есть ли способ "приклеить" таблицу к боковой стороне ячейки, или указать размер столбцов, чтобы "заставить" их выравниваться?

Вот упрощенная версия моего кода :

<div class="card">
  <div class="card-body p-0">
    <table class="table" style="width: 100%;">
      <tbody>
        <tr>
          <th bgcolor="gray" style="color: white">aaaaaaaa</th>
          <th bgcolor="gray" style="color: white">bbbbbbbb</th>
          ...
          <th bgcolor="gray" style="color: white">uuuuuuuu</th>
          <th bgcolor="gray" style="color: white">vvvv</th>
        </tr>
        <tr>
          <td style="width:3%;">
            <button type="button" class="btn btn btn-primary float-center" data-toggle="collapse" data-target="#test">aaaaaaaaa</button>
          <td style="width:3%;">bbbbbbbbb</td>
          ...
          <td style="width:3%;">uuuuuuuuuuuuuuu</td>
          <td>
            <a href="#" class="btn btn-danger float-center">vvvv</a>
          </td>
        </tr>
        <tr>
          <td colspan="22">
            <div class="collapse" id="test">
              <div class="card">
                <div class="card-body p-0">
                  <table class="table">
                    <tr>
                      <td bgcolor="#E5E5E5" style="width:3%;">aaaaaaaaa</td>
                      <td bgcolor="#E5E5E5" style="width:3%;">bbb</td>
                      ...
                      <td bgcolor="#E5E5E5" style="width:3%;">uuuuuuuuuuuuuuuuuu</td>
                      <td bgcolor="#E5E5E5" style="width:3%;">
                        <a href="#" class="btn btn-danger float-center">vvvv</a>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Спасибо за помощь

Просто сделайте это в своем коде. Это называется вложенной таблицей.

    <table>
    <tr>
    <td>
    Add here your second table
    </td>
    </tr>
    </table>

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

<th>Height<br>Width<br>Depth</th>
...

<td>
   {{item.height}}<br>{{item.width}}<br>{{item.depth}}
</td>

или

<td>{{item_size|linebreaks}}</td>

Эта последняя форма может быть объединена с методом на модели, чтобы собрать элементы данных (поля модели) вместе для шаблона

def item_size(self):
    return '\n'.join( 
       f'{self.height} h', 
       f'{self.width} w', 
       f'{self.depth} d'
    )

часто с небольшим переформатированием данных, которое легко сделать в коде Python. (например, если некоторые предметы имеют цилиндрическую форму, вместо высоты и ширины генерируйте f'{self.diameter} dia' )

Вернуться на верх