CA3 : tableau unique aligne (colonnes fixes, en-tetes de cadres/sous-sections)

compta/templates/compta/decl_tva.html

@@ -1,6 +1,19 @@
 {% extends "compta/base.html" %}
 {% block titre %}Déclaration TVA{% endblock %}
 
+{% block extrastyle %}
+<style>
+  table.ca3 { table-layout:fixed; }
+  table.ca3 td, table.ca3 th { text-align:right; }
+  table.ca3 td:first-child, table.ca3 th:first-child,
+  table.ca3 td.lib, table.ca3 th.lib { text-align:left; }
+  table.ca3 tr.cadre td { text-align:left; font-weight:700; font-size:15px;
+      color:var(--txt); padding:18px 11px 6px; border-bottom:2px solid #475569; }
+  table.ca3 tr.soustitre td { text-align:left; color:var(--muted); font-size:11px;
+      text-transform:uppercase; letter-spacing:.05em; padding:11px 11px 3px; border-bottom:none; }
+</style>
+{% endblock %}
+
 {% block extrafilters %}
   <label>{% if periode_type == 'trimestre' %}Trimestre{% else %}Mois{% endif %}
     <select name="periode" onchange="this.form.submit()">
@@ -23,27 +36,32 @@
 
   {% if mode == 'ca3' %}
     <div class="card">
-      {% for cadre in decl.cadres %}
-        {% if cadre.sous %}
-          <h3 style="margin:18px 0 4px;font-size:15px;">Cadre {{ cadre.titre }}</h3>
-          {% for sous in cadre.sous %}
-            <div style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin:12px 0 2px;">{{ sous.titre }}</div>
-            <table>
-              <thead><tr><th style="width:64px">Ligne</th><th>Libellé</th><th>Base HT</th><th>TVA</th></tr></thead>
-              <tbody>
+      <div class="table-wrap">
+      <table class="ca3">
+        <colgroup>
+          <col style="width:70px"><col><col style="width:150px"><col style="width:130px">
+        </colgroup>
+        <thead><tr><th>Ligne</th><th class="lib">Libellé</th><th>Base HT</th><th>TVA</th></tr></thead>
+        <tbody>
+          {% for cadre in decl.cadres %}
+            {% if cadre.sous %}
+              <tr class="cadre"><td colspan="4">Cadre {{ cadre.titre }}</td></tr>
+              {% for sous in cadre.sous %}
+                <tr class="soustitre"><td colspan="4">{{ sous.titre }}</td></tr>
                 {% for l in sous.lignes %}
                   <tr {% if l.total %}class="total"{% endif %}>
                     <td>{{ l.ref }}</td>
-                    <td>{{ l.libelle }}</td>
+                    <td class="lib">{{ l.libelle }}</td>
                     <td>{% if l.base is not None %}{{ l.base }} €{% endif %}</td>
                     <td>{% if l.tva is not None %}{{ l.tva }} €{% endif %}</td>
                   </tr>
                 {% endfor %}
-              </tbody>
-            </table>
+              {% endfor %}
+            {% endif %}
           {% endfor %}
-        {% endif %}
-      {% endfor %}
+        </tbody>
+      </table>
+      </div>
     </div>
     <div class="sub">Numéros de lignes du formulaire 3310-CA3 (régime réel normal).
        Seules les lignes utilisées sont affichées. Montants arrondis à l'euro, comme le formulaire.</div>