Discussion :

[ludo40190]

Bonjour à tous,

Dans un CRM (Hubspot) je créé des modèles de devis en HTML (et HubML).

Je suis confronté à un problème : avec le code ci-dessous, une ligne de mon tableau est parfois sur deux pages, ce qui n'est pas joli, alors j'ai essayé de jouer avec les paramètres "page-break-inside", mais impossible d'arriver à un résultat.

Auriez-vous des conseils, pour que les cellules du tableau soient forcément sur une seule page ?

Merci par avance.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
    <div style="border-radius:10px">
      <section Class="center quote" style="margin-top:4em; border-radius:10px">
        <table style="text-align:center; border-spacing:0; border-radius:10px; color:#000000">
          <thead bgcolor="A9A9A9">
            <tr style="text-align:center">
              <th class="border_top border_bottom border_left border_right" style="width:35px; padding-left:1em; text-align:left">N°</th>
              <th class="border_top border_bottom" style="width:120px; padding-left:1em; text-align:left">PHASE</th>
              <th class="border_top border_bottom" style="text-align:left; padding-left:1em">PRODUIT </th>
              <th class="border_top border_bottom" style="width:40px">QTE</th>
              <th class="border_top border_bottom" style="width:120px">PU HT</th>
              {% if HAVE_PRODUCT_DISCOUNT == True %}
                <th class="border_top border_bottom" style="width:100px">REMISE</th>
              {% else %}
                <th class="border_top border_bottom"></th>
              {% endif %}
              <th class="border_top border_bottom border_right Price_align" style="width:150px">TOTAL HT</th>
            </tr>
          </thead>
          <tbody>
            {% for item in LINE_ITEMS|sort(False, False, 'hs_position_on_quote') %}
              {% if item.type_de_produit != 'Option' %}
                <tr>
                  <!-- Champ N° -->
                  <td class="border_left border_right" style="padding-left:1em; text-align:left; vertical-align:top"><b>{{ NB_LINE.val }}</b></td>                    
                  {% do NB_LINE.update({val: NB_LINE.val + 1 }) %}
                  <!-- Champ PHASE -->
                  <td style="padding-left:1em; text-align:left; vertical-align:top"><b>{{ item.phase }}</b></td>
                  <!-- Champ PRODUIT  -->
                  <td style="text-align:left; padding-left:1em; vertical-align:top"><b>{{ item.name }}</b></td>
                  <!-- Champ QTE -->
                  <td style="text-align:center; vertical-align:top"><b>{{ item.quantity }}</b></td>
                  <!-- Champ PU HT -->
                  <td style="vertical-align:top"><b>{{ item.price|format_currency(LOCALE, CURRENCY, true) }}</b></td>
                  <!-- Champ REMISE -->
                  {% if HAVE_PRODUCT_DISCOUNT == True %}
                    {% if item.discount > 0 %}
                      <td style="vertical-align:top"><b>{{ item.discount|format_currency(LOCALE, CURRENCY, true) }}</b></td>
                    {% elif item.hs_discount_percentage > 0 %}
                      <td style="vertical-align:top"><b>{{ item.hs_discount_percentage }} % </b></td>
                    {% else %}
                      <td style="vertical-align:top">-</td>
                    {% endif %}
                  {% else %}
                    <td></td>
                  {% endif %}
                  <!-- Champ TOTAL HT -->
                  {% if item.quantity == 0 %}
                    <td class="border_right Price_align" style="vertical-align:top"><b> En option </b></td>
                  {% else %}
                    <td class="border_right Price_align" style="vertical-align:top"><b>{{ item.hs_tcv|format_currency(LOCALE, CURRENCY, true) }}</b></td>
                  {% endif %}
                  </tr>
 
                {% if item.description != "" %}
                  <tr>
                    <td class="border_bottom border_left border_right"></td>
                    <td class="border_bottom"></td>
                    <td class="border_bottom" style="text-align:left; padding-left:1em" colspan="{{COL_MAX.val - 3}}"> <pre>{{ item.description }}</pre> </td>
                    <td class="border_bottom border_right"></td>
                  </tr>
                {% endif %}
              {% endif %}
            {% endfor %}
          </tbody>
        </table>
      </section>
    </div>

[NoSmoking]

Bonjour,

alors j'ai essayé de jouer avec les paramètres "page-break-inside", mais impossible d'arriver à un résultat.

c'est effectivement toujours, ou presque, un casse tête, mais on ne sait pas ce que tu as vraiment essayé et sur quel élément !

PS : il est préférable de fournir le code HTML généré et non le code serveur si tu veux que certains fassent des tests rapidement.