My Html Table footer doesn't render correctly

I'm trying to create a simple table. I would like a footer with only one cell but I don't know why it's divided in two. Any idea?

<table class="table-cart-view-producer">
            <thead>
                <tr>
                  <th>Produit</th>
                  <th>Quantité</th>
                  <th>Prix</th>
                </tr>
            </thead>
            <tfoot>
              <tr>
                <th> Prix Total du Panier : <strong>{{cart_price}}€</strong></th>
              </tr>
            </tfoot>
            <tbody>
              {% for item in cartitems %}
                <tr>
                    <td>{{item.stock_item.product_stockitem.name}}</td>
                    <td>{{item.quantity}} {{item.stock_item.product_stockitem.unit}}</td> 
                    <td>{{item.get_total_price}}€</td>       
                </tr>
              {% endfor %}
            </tbody>
          </table>

It renders this way:

Back to Top