Bonjour,

Afin de permettre aux utilisateurs de mon site de télécharger leur résultats, j'utilise HTML2PDF afin de générer le fichier qu'ils peuvent par la suite télécharger.
Dans ce fichier, je dois afficher des colonnes dont la hauteur est prédéfinie et variable (supérieure ou égale à 0), ainsi que la valeur que représente la hauteur de la colonne et certains identifiants (on appellera une colonne + tous ses identifiants : colonne-totale) . Et comme un petit schéma vaut mieux qu'un long discours, je met une image de ce que j'ai.

Pour décrire chaque colonne-totale il y a :
une fake colonne pour le blanc que l'on trouve en haut
la valeur représentée (si elle est > 0)
la fameuse colonne avec une hauteur = (3 * la valeur ci dessus)px
l'identifiant de l'acide aminé
l'identifiant de la structure secondaire (avec un background de la même couleur que la colonne)
et enfin le code 3 lettres de l'acide aminé

On en arrive au problème. Comme on peut le voir sur l'image, lorsque la hauteur de la colonne est moins haute qu'une ligne, HTML2PDF rajoute un blanc de hauteur ((hauteur d'une ligne) - (hauteur de la colonne)) en dessous, ce qui a pour effet de plus ou moins décaler ces colonnes vers le bas.
J'ai déjà essayé pas mal de trucs pour enlever ce blanc mais rien ne marche. Il ne s'agit pas d'une marge car j'ai essayé de la forcer à 0 et ça ne change rien, un align-bottom (au lieu du align-top actuel) aligne bien le bas de chaque colonne-totale mais alors c'est les colonne qui ne commencent pas au même endroit.

Bref je suis un peu paumé là...
Quelqu'un a déjà eu ce problème ou sait comment le régler ?
(Ou même une simple idée je suis preneur !)

P.S. : Sur le site (donc sans utiliser HTML2PDF), ça marche très bien !

Voici mon code :

{% trans_default_domain "musicBundle" %}
<!DOCTYPE html>
<html>
<head>
    <title>{{ 'label.result.graphic.hottitle'|trans({'%name%': query.pdb.name, '%type%': ((query.mode == "syst") ? "Systematic" :  query.mutfile.name), '%date%': query.outDate | date("d-m-Y")}) }}</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: #777777;
            font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
            background-color: #EFEFEF;
        }

        .clear {
            clear: both;
        }

        .bar {
            margin: 0 1px;
            vertical-align: top;
        }

        .bar div {
            text-align: center;
            width: 33px;
        }

        .attrDefault {background-color: #ffff88;}
        .attrT {background-color: #ff8888; !important}
        .attrG {background-color: #ff0000; !important}
        .attrH {background-color: #d90000; !important}
        .attrI {background-color: #b00000; !important}
        .attrB {background-color: #88ffff; !important}
        .attrE {background-color: #8888ff; !important}
        .attrS {background-color: #12c83d; !important}
        .attrC {background-color: #88ff88; !important}
    </style>
</head>
<body>

<h3>{{ 'label.result.graphic.hottitle'|trans({'%name%': query.pdb.name, '%type%': ((query.mode == "syst") ? "Systematic" :  query.mutfile.name), '%date%': query.outDate | date("d-m-Y")}) }}</h3>

{% set nbrMaxColumn = 29 %}
{% set index = 0 %}
{% set currentLetter = "" %}

{# On calcul le max.#}
{% set maxReg = 0 %}
{% for data in datas %}
    {% if data.posRes > maxReg  %}
        {% set maxReg = data.posRes %}
    {% endif %}
{% endfor %}
{% set maxReg = maxReg + 7 %}

{% for data in datas %}
{# 1ere etape, on init le flag a la premier lettre trouvee + creation table #}
{% if currentLetter == "" %}
  {% set currentLetter = data.resId[0:1] %}
    <table><tbody><tr>
{% endif %}

{% if index == nbrMaxColumn %}
    {% set index = 0 %}
    </tr><tr>
{% endif %}

{# Pour chaque nouvelle lettre, il faut crer un nouveau tableau. S'il n'existe pas de lettre en début de ligne, on considère que c'est toujours la même #}
{% if data.resId[0:1] matches '{^[a-zA-Z]}' and currentLetter != data.resId[0:1] %}
    </tr></tbody></table>
<div class="clear"></div>
<table><tbody><tr>

    {# Retour a la ligne des que l'on change de lettre dans le prefixe #}
    {% set currentLetter = data.resId[0:1] %}
    {% set index = 0 %}
{% endif %}

        <td class="bar">
            {# Calcul des barre, on fait la barre visible plus une barre fake permettant de gerer le float left plus facilement#}
            {# le total des deux barres doit faire un max #}
            {# On affiche toujours la barre fake #}

            {% set heightDefault = (maxReg * 3)|abs %}
            {% set height = data.posRes * 3 > 1 ? (data.posRes * 3 | number_format(0)) : (data.posRes > 0 ? 1 : 0) %}
            {% set fakeHeight = heightDefault - (height|abs) %}
            {% set fakeHeight2 = 3 * (4.25 - height|abs)%}

            <div class="fake" style="padding: 0 0 {{ fakeHeight > 0 ? fakeHeight~'px' : 0 }} 0"></div>
            {% if ((data.posRes * 100)|abs) > 0 %}
                <div>   {{ data.posRes }} </div>
                <div class="attr{{ data.secStru }} " style="padding-bottom: {{ height|abs }}px; margin: 0"></div>
            {% else %}
                <div class="clear">
                    &nbsp;
                </div>
            {% endif %}
            <div class="clear">{{ data.resId }}</div>
            <div class="attr{{ data.secStru }} attrDefault">{{ data.secStru }}</div>
            <div>{{ data.resName }}</div>
        </td>
        {% set index = index + 1 %}
        {% endfor %}
    </tr>
    </tbody>
</table>

</body>
</html>

Aucune réponse