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>

enter image description here

HTML tables should not contain multiple (or nested) tbody and thead elements. Check the rendered raw html to see what it looks like. — Håken Lid
– Håken Lid, Commented Nov 6, 2017 at 23:29

Paul Roub · Accepted Answer · 2020-06-04 15:18:47Z

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>

edited Jun 4, 2020 at 15:18

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Jun 4, 2020 at 15:12

shmn

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue rendering with nested tables in Django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related