How to correctly display a table inside another table with Django templates

i'm using a table to display values in a django template, and I have a secondary table inside my principal table (the grey one in the image below) :

image of my table

The two tables uses the same columns, and my problem is that the columns are not aligned (for example, the "n" cell in my first line is not aligned with my "n" cell in the second table, because values don't have the same size, and it's gonna be hard to know than "n" is in the "n" column when I will have "real" values)

(I've created a secondary table to fix this problem : DJANGO - close two collapse buttons with one, but if you think there is a better way to do it, and avoid my alignment problem, dont hesitate to tell me)

Is there a way to "glue" the table to the side of the cell, or to specify the size of the columns to "force" alignment ?

Here is a simplified version of my code :

<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>

Thanks for your help

Just do like this in your code. This is called nested table.

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

I find that with wide tables it often looks nicer to group two or three small items together in one table cell:

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

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

or

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

This latter form can be combined with a method on the model to bring the items of data (model fields) together for the template

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

often with a bit of data-reformatting which is easy to do in Python code. (for example, if some items are cylindrical, generate f'{self.diameter} dia' in place of both height and width )

Back to Top