Issue rendering with nested tables in Django

Question

I'm trying to loop two tables within each other. I have a list of tasks that each have a list of materials. I'd like to next the tables within each other. However, the code below doesn't render the second task into columns. So, when it loops it seems as if the table structure is destroyed. I'm using Django/Python.

<div class="table-responsive">
    <table id="taskTable" class="table">
        {% for task in projecttype.projecttask_set.all %}
            <h5>Task - {{ task.name }}</h5>
            <thead class="alert-success">
            <tr>
                <th>Quantity</th>
                <th>Units</th>
                <th>Cost</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{ total_units_required }}</td>
                <td>{{ task.base_unit_label }}</td>
                <td>{{ task.base_unit_cost }}</td>
            </tr>
            </tbody>
            <table id="materialTable" class="table">
            <thead>
            <tr class="alert-info">
                <th>Material</th>
                <th>Cost per Task Unit</th>
                <th>Material Cost</th>
                <th>Total Cost</th>
            </tr>
            </thead>
            {% for material in task.materials.all %}
                <tbody>
                <tr>
                    <td>{{ material.name }}</td>
                    <td>{{ material_quantity_per_task_base_unit }}</td>
                    <td>{{ total_material_quantity }}</td>
                    <td>{{ total_material_cost }}</td>
                </tr>
                </tbody>
            {% endfor %}
            </table>
        {% endfor %}
    </table>
</div>

Answer 1

I encountered the same issue. The nested table has to be inside a table cell

e.g.:

<table>
    <tr>
    <td>
        <table>
        ...
        </table>
    </td>
    </tr>
</table>