Data not displaying correctly in my template for django

Question

I need help figuring out how to set up my html table in a way that is giving me issues if anyone can help me figure out how to fix it and make it look like the second picture would be awesome.

*Side note I am using Django

So first off I have three models that I will be using in this view/template. They are called Sheet, Dimension, Inspeciton_vals, my Dimension model has a forgien key called sheet_id which links to sheet, my Inspeciton_vals model has a foreign key that links to Dimension.

Here is my views.py

@login_required 
def shipping(request, id): 
  sheet_data = Sheet.objects.get(pk=id) 
  work_order = sheet_data.work_order 
  customer_data = Customer.objects.get(id=sheet_data.customer_id) 
  customer_name = customer_data.customer_name 
  title_head = 'Shipping-%s' % sheet_data.work_order 
  complete_data = Sheet.objects.raw("""select s.id, s.work_order, d.target, i.reading, d.description, i.serial_number from app_sheet s left join app_dimension d on s.id = d.sheet_id 
  left join app_inspection_vals i on d.id = i.dimension_id""") 


  for c_d in complete_data: 
    dim_description = Dimension.objects.filter(sheet_id=c_d.id).values_list('description', flat=True).distinct() 
    dim_id = Dimension.objects.filter(sheet_id=c_d.id)[:1] 
    for d_i in dim_id: 
      dim_data = Inspection_vals.objects.filter(dimension_id=d_i.id) 
      sample_size = dim_data   


  return render(request, 'app/shipping.html', 
  { 
     'work_order': work_order, 
     'sample_size': sample_size, 
     'customer_name': customer_name, 
     'title': title_head, 
     'complete_data': complete_data, 
     'dim_description': dim_description, 
  }) 

here are my models

class Sheet(models.Model): 
  objects = SheetManager() 

  create_date = models.DateField() 
  updated_date = models.DateField() 
  customer_name = models.CharField(max_length=255) 
  part_number = models.CharField(max_length=255) 
  part_revision = models.CharField(max_length=255) 
  work_order = models.CharField(max_length=255) 
  purchase_order = models.CharField(max_length=255) 
  sample_size = models.IntegerField() 
  sample_scheme = models.CharField(max_length=255) 
  overide_scheme = models.IntegerField() 
  template = models.IntegerField() 
  sample_schem_percent = models.IntegerField() 
  critical_dimensions = models.IntegerField() 
  closed = models.IntegerField() 
  serial_index = models.CharField(max_length=255) 
  drawing_number = models.CharField(max_length=255) 
  drawing_revision = models.CharField(max_length=255) 
  heat_number = models.CharField(max_length=255) 
  note = models.CharField(max_length=255) 
  valc = models.CharField(max_length=255) 

class Dimension(models.Model): 
  description = models.CharField(max_length=255) 
  style = models.CharField(max_length=255) 
  created_at = models.DateField() 
  updated_at = models.DateField() 
  target = models.IntegerField() 
  upper_limit = models.IntegerField() 
  lower_limit = models.IntegerField() 
  inspection_tool = models.CharField(max_length=255) 
  critical = models.IntegerField() 
  units = models.CharField(max_length=255) 
  metric = models.CharField(max_length=255) 
  target_strings = models.CharField(max_length=255) 
  ref_dim_id = models.IntegerField() 
  nested_number = models.IntegerField() 

  met_upper = models.IntegerField() 
  met_lower = models.IntegerField() 
  valc = models.CharField(max_length=255) 
  sheet = models.ForeignKey(Sheet, on_delete=models.CASCADE, default=DEFAULT_FOREIGN_KEY) 

class Inspection_vals(models.Model): 
  created_at = models.DateField() 
  updated_at = models.DateField() 
  reading = models.IntegerField(null=True) 
  reading2 = models.IntegerField(null=True) 
  reading3 = models.IntegerField(null=True) 
  reading4 = models.IntegerField(null=True) 
  state = models.CharField(max_length=255) 
  state2 = models.CharField(max_length=255) 
  state3 = models.CharField(max_length=255) 
  state4 = models.CharField(max_length=255) 
  approved_by = models.CharField(max_length=255) 
  approved_at = models.DateField(null=True, blank=True) 
  dimension = models.ForeignKey(Dimension, on_delete=models.CASCADE, default=DEFAULT_FOREIGN_KEY) 
  serial_number = models.IntegerField(default=1) 

Finally here is my template What I want to do is have my header be the serial numbers. This will be based off sample_size on my sheet model so lets say I have 24 as a sample size show 20 horizontal rows. Next is I will have my dimension description on the right side now with the sample_size being 24 I will have 2 dimensions linked to my sheet model this will change every time as well. Finally I want to put the reading in the rest of the table for each Inspection_val and dimension- so if I have 2 dimensions with a sample_size of 24 I should have 48 Inspeciton_vals with that I want to use the correct reading for the coresponding dimension and serial number. Here is what I have so far--

<div class="container"> 
  <div class="row"> 
      <div> 
        <table > 
          <thead> 
          <tr> 
            <th>Serial Number</th> 
            {% for ss in sample_size %} 
               <th>{{ ss.serial_number }}</th> 
            {% endfor %} 
          </tr> 
          <tr> 
          {% for r_c in complete_data %} 
            <th> {{ r_c.reading }} </th> 
          {% endfor %} 
          </tr> 
          </thead> 
          <tbody> 
            {% for desc in dim_description.all %} 
            <tr> 
              <th> {{ desc }}</th> 
            </tr> 
            {% endfor %} 
          </tbody> 
        </table> 
     </div>       
  </div> 
</div> 

Here is what it looks like now

Here is what I would like it to look like

Bonus here is what my data looks like

Fix after answer suggestions still not displaying it how I would like it to..

<div class="container"> 
  <div class="row"> 
      <div> 
        <table > 
          <thead> 
          <tr> 
            <th>Serial Number</th> 
            {% for ss in sample_size %} 
               <th>{{ ss.serial_number }}</th> 
            {% endfor %} 
          </tr> 
          </thead> 
          <tbody> 
            {% for desc in dim_description.all %} 
            <tr> 
              <td> {{ desc }}</td> 
            </tr> 
            {% for r_c in complete_data %} 
              <td> {{ r_c.reading }} </td> 
            {% endfor %} 

            </tr> 
            {% endfor %} 
          </tbody> 
        </table> 
     </div>       
  </div> 
</div> 

Picture of what it looks like now

Updated code with @Michael Platt suggestion

<div class="container"> 
  <div class="row"> 
      <div> 
        <table > 
          <thead> 
          <tr> 
            <th>Serial Number</th> 
            {% for ss in sample_size %} 
               <th>{{ ss.serial_number }}</th> 
            {% endfor %} 
          </tr> 
          </thead> 
          <tbody> 
             {% for desc in dim_description.all %} 
             <tr> 
                <td> {{ desc }}</td> 
                {% for r_c in complete_data %} 
                  <td> {{ r_c.reading }} </td> 
                {% endfor %} 
             {% endfor %} 
             </tr> 
          </tbody> 
        </table> 
     </div>       
  </div> 
</div> 

@Michael Platt helped fix the html issue now I want to be able to split the reading in half so 24 will go on the inner od row and the next 24 will go on the outter od row.

Answer 1

Ok so knowing that I think this is your problem here:

<tbody>
   {% for desc in dim_description.all %} 
   <tr> 
      <td> {{ desc }}</td> 
      {% for r_c in complete_data %} 
         <td> {{ r_c.reading }} </td> 
      {% endfor %} 
   {% endfor %} 
   </tr> 
</tbody> 

You had an extra <\tr> just before your second {% endfor %} in the <tbody> tags. I've changed it above so I think it will give the right design you want. If it doesn't let me know but it's a bit hard to test on my end just because I don't have the app up and running :-)

Cheers,