Use thead and tbody in tables

copanier/static/app.css

@@ -337,12 +337,15 @@ th.total {
 tr:nth-child(even) {
   background-color: #ddd;
 }
-tr:nth-child(1) {
+thead tr {
   background-color: #3498db;
 }
-tr:nth-child(1) * {
+thead tr * {
   color: #f1f1f1;
 }
+thead th + th {
+  border-left: 1px solid white;
+}
 article.order {
   max-width: 1200px;
   margin-left: auto;

copanier/templates/adjust_product.html

@@ -8,7 +8,10 @@
     <p><strong>Manquant</strong> {{ delivery.product_missing(product) }}</p>
     <form method="post">
     <table>
+        <thead>
             <tr><th>Personne</th><th class="amount">Commande</th><th class="amount">Ajustement</th></tr>
+        </thead>
+        <tbody>
             {% for email, order in delivery.orders.items() %}
             <tr>
                 <td>{{ email }}</td>
@@ -16,6 +19,7 @@
                 <td class="with-input"><input type="number" min=0 name="{{ email }}" value="{{ order[product].adjustment }}"></td>
             </tr>
             {% endfor %}
+        </tbody>
     </table>
     <input type="submit" value="Enregistrer">
     </form>

copanier/templates/delivery.html

@@ -5,7 +5,7 @@
 {% include "includes/delivery_head.html" %}
 <article class="delivery">
     <table class="delivery">
-        <tbody>
+        <thead>
             <tr>
                 <th class="ref">Référence</th>
                 <th class="product">Produit</th>
@@ -24,6 +24,8 @@
                     </th>
                 {% endfor %}
             </tr>
+        </thead>
+        <tbody>
             {% for product in delivery.products %}
             <tr>
                 <td class="ref">{{ product.ref }}</td>

copanier/templates/place_order.html

@@ -6,6 +6,7 @@
 {% include "includes/delivery_head.html" %}
 <form method="post">
     <table class="order">
+        <thead>
         <tr>
             <th class="product">Produit</th>
             <th class="price">Prix</th>
@@ -13,7 +14,10 @@
                 <th class="packing">Conditionnement</th>
             {% endif %}
             <th class="amount">Quantité</th>
-            {% if delivery.status == delivery.ADJUSTMENT %}<th class="amount">Ajustement</th>{% endif %}</tr>
+            {% if delivery.status == delivery.ADJUSTMENT %}<th class="amount">Ajustement</th>{% endif %}
+        </tr>
+        </thead>
+        <tbody>
         {% for product in delivery.products %}
         <tr>
             <th class="product">{{ product }}
@@ -33,6 +37,7 @@
             {% endif %}
         </tr>
         {% endfor %}
+        </tbody>
     </table>
     <p>Total: {{ order.total(delivery.products) if order else 0 }} €</p>
     {% if delivery.is_passed %}