Error with data-ref-tables when building a customized invoice template

Self-Hosted | v5
1

Hello, people,

I’m frustrated, because I don’t know if it’s me who’s “faulty” or if it’s a bug.

It’s now the third time that when I try to create a new invoice-template, that I get a design-problem like this (not the red bordered footer, the product tables with the paragraph-codes):

Bildschirmfoto vom 2024-01-20 20-08-19
Bildschirmfoto vom 2024-01-20 20-08-19782×841 69.2 KB

Why is that so? Am I just dumb? I’m not a developer but an “IT-specialist”.

Hope someone can help. However, thank you!

PS: Oh, I forgot to mention, that the table-header won’t be shown if the option to hide empty columns is activated (what I also want to).

2

Hi,

@david do you have any ideas?

3

Hello @all,

I snipped out the html-code of one of my templates with an example-preview Invoice Ninja created for testing. Maybe this can help to find the cause of the problem. I X-ed out (hopefully) all sensitive data, but have to mention, that – as I am German – I used Umlaute and other special characters. I mention this, because it seems that paragraph-code is somehow translated into character-code – I don’t know the correct English technical term – like   for non-breakable space-characters.

Hoewever, here’s the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><style id="style">
    @import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
    @page {
        size: A4 portrait;
        padding: 0;
        margin: 2mm 2mm 7mm 2mm ; /* Druckerrand, wobei hier von Haus aus schon 0,3cm anliegen.
                           So kommen wir aber auf die vom Drucker ben&ouml;tigten 0,5 cm Rand. */
    }

    :root {
        --primary-color: #CD8500;
        --secondary-color: #2d2d2d;
        --line-height: 1.3;
    }

    html {
        margin: 0;
        padding: 20mm 20mm 15mm 20mm; /* Grunds&auml;tzliche Seitenr&auml;nder */
        page-break-inside: auto;
        page-break-after: auto;
    }

    p {
        margin: 0;
        padding: 0;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        font-family: Arial, Liberation Sans, Helvetica, sans-serif;
        font-size: 14px !important; !important;
        page-break-inside: auto;
        page-break-after: auto;
        /* Reset the page counter at the beginning of the document */
        counter-reset: page;
    }

    table {
        padding: 0;
        margin: 0;
        page-break-inside: auto; 
    }
    tr {
        page-break-inside: auto;
        page-break-after: auto;
        vertical-align: top;
    }

    /* Seitenzahlen, wenn's denn funzen sollte */
    footer {
        /* Increment the page counter at the end of each page */
        counter-increment: page;
        font-size: 11pt;
        text-align: right;
    }
    footer::after {
        /* Insert the page number and the total number of pages */
        content: "Seite " counter(page) " von " counter(pages);
    }
    /* ENDE Seitenzahlen*/


    /** Der Freiraum auf jeder Seite f&uuml;r die Kopfzeile im Header-Code **/

    #repeating-header-space {
            height: 27mm;
            border: 3px solid green;
      }

    #repeating-header-container {

    }

    .repeating-header {
        display: grid;
        grid-template-columns: 1fb 1.5fb; /* Die jew. Breite wird manuell festgelegt*/
        grid-template-areas: "a b";
        position: fixed;
        min-height: 25mm;
        padding-right: 17mm; /* rechter Seitenrand exkl. 3mm Rand*/
        justify-content: left;
        vertical-align: top;
        border: 1px solid black;
    }

    .repeating-header .company-logo {
        max-width: 35%;
        margin-top: 5px
    }

    .repeating-header > .entity-container {
        width: 75mm;
border: 2px dashed blue;
    }

    .repeating-header .entity-container,
    .repeating-header #entity-details tr,
    .repeating-header #entity-details th {
        font-size: 11pt;
        font-weight: normal;
        line-height: 1.5;
        
    }

    .repeating-header .entity-container #entity-label {
        font-family: Roboto;
        font-size: 28pt;
        font-weight: bold;
        color: #CD8500;
        margin-left: -2px;
        margin-bottom: 5px;
        vertical-align: top;
        line-height: 1;
    }

    .repeating-header #entity-details > tr,
    .repeating-header #entity-details th {
        text-align: left;
    }
    /** ENDE Kopfzeile **/

    /* Dank folgender Zeilen wird nicht durch Header und Footer geschrieben */
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }

    /** Normaler INHALT (ab Adressfeld) **/

    .din5008 {
        width: 165mm; /* DIN A4 &ndash; Seitenr&auml;nder => 210mm &ndash; 25mm &ndash; 20mm */
    }

    .content-erste-Seite {
        
    }

    .content-fortlaufend {
        position: absolute;
        top: 82mm;
        width: 165mm ; /* DIN A4 &ndash; Seitenr&auml;nder => 210mm &ndash; 25mm &ndash; 20mm */
    }

    tbody {
        width: 165mm;
    }


    /* ADRESSFELD */
    #adressfeld-container {
        height: 45mm;
        /*border: 1px solid black; */
    }

    #absenderzeile {
        /*position: relative;*/
        top: 0mm;
        height: 5mm;
        vertical-align: bottom;
        font-size: 8pt;
    }

    #empfangsadresse {
        /*position: relative;*/
        top: 12.7mm; /* NICHT 17.7mm, weil relativ vom letzten Container! */
        height: 27.3mm;
        font-size: 11pt;
        display: grid;
        gap: 5mm;
        grid-template-columns: 7cm 1fr 1fr;
        grid-template-areas: "a b c";
        /*border: 1px solid black;*/
    }
    /* ENDE ADRESSFELD */

    /* Versteckt (vielleicht gem. Option) die Lieferadresse */
    #shipping-details {
        opacity: 0;
        flex-direction: column;
        line-height: var(--line-height);
    }


    /* Textfeld gem. DIN 5008 */
    #textfeld-din5008 {
        padding-top: 8.46mm; /* Der DIN-5008-Abstand zum Adressfeld */
        width: 165mm;
        overflow-wrap: break-word;
    }

    #betreffzeile, #betreffhinweis {
        font-family: Roboto;
        font-size: 14pt;
        font-weight: bold;
    }

    #betreffhinweis {
       font-size: 9pt;
    }

    #bezugzeile {
        font-size: 11pt;
    }


    /* Einstellungen f&uuml;r die Produkt- und Task-Tabellen */
    [data-ref="table"] {
        /*margin-top: 1rem; */
        table-layout: fixed;
        width: 100%;
        font-size: 10pt;
        overflow-wrap: break-word;
    }
    .task-time-details {
        display: block;
        margin-top: 7px;
        font-size: 9pt;
    }

    [data-ref="table"] > * > tr > * {
        text-align: right;
        padding: 0.5rem 5px 0.5rem 0;    
    }
    [data-ref="table"] > thead > tr > th {
        border-bottom: 1px solid #000;
    }
    [data-ref="table"] > * > tr > :nth-child(-n+2) {
        text-align: left;
    }
    [data-ref="table"] > * > tr > :last-child {
        padding-right: 0;
    }

    /* Spaltenbreiten */
    [data-ref="table"] > thead > tr > th:first-child {
        width: 25mm
    }
    [data-ref="table"] > thead > tr > th:nth-child(2) {
        width: 100%;
    }
    [data-ref="table"] > thead > tr > th:nth-child(3) {
        width: 1.8cm;
    }
    [data-ref="table"] > thead > tr > th:nth-child(4) {
        width: 1.5cm;
    }
    [data-ref="table"] > thead > tr > th:nth-child(5) {
        width: 1.5cm;
    }
    [data-ref="table"] > thead > tr > th:nth-child(6) {
        width: 1.5cm;
    }
    [data-ref="table"] > thead > tr > th:last-child {
        width: 2.5cm;
    }
    /* ENDE Spaltenbreiten */


    /*[data-ref="table"] > thead > tr > th:last-child,
    [data-ref="table"] > thead > tr > td:last-child {
        text-align: right;
    }
    */

    [data-element='product_table-product.description-td'], td {
            min-width:100%;
            max-width: 300px;
            overflow-wrap: break-word; 
        }

    /* ENDE Einstellungen f&uuml;r die Produkt- und Task-Tabellen */

    /* Einstellungen f&uuml;r das, was unter der Artikelliste kommt */
    

    [data-element=''] {}

    #table-totals {
        display: grid;
        grid-template-columns: auto 6cm;
        padding-top: .5rem;
        gap: 20px;
        break-inside: avoid;
        overflow: visible !important;
        font-weight: normal;
        font-size: 10pt;
        line-height: 1.6;
        border-top: 1px solid #000;
    }

    #table-totals .totals-table-right-side>* {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #table-totals>.totals-table-right-side>*> :nth-child(1) {
        text-align: left;
        margin-top: .25rem;
    }

    #table-totals>.totals-table-right-side> * > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.25rem * var(--tw-space-y-reverse));
    }

    #table-totals>.totals-table-right-side>*> :nth-child(2) {
        text-align: right;
    }
	
    #table-totals > *
    [data-element='total-table-balance-due-label'],
    #table-totals > *
    [data-element='total-table-balance-due'] {
        font-weight: bold;
    }

    #table-totals > * > :last-child {
        text-align: right;
    }

    [data-ref="total_table-footer"] {
        padding-left: 1rem;
    }

    [data-ref="totals_table-outstanding"] {
        color: var(--primary-color)
    }

    /** Markdown-specific styles. **/
    [data-ref="table"] h3 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    [data-ref="totals_table-outstanding-label"],
    [data-ref="totals_table-outstanding"] {
/*        background-color: #f5f5f5;  */
        color: black;
        padding-top: 7px;
        padding-bottom: 7px;
        font-weight: bold;
        border-top: 1px solid #000;
        border-bottom: 3px double #000;
    }

    [data-ref="statement-totals"] {
        margin-top: 1rem;
        text-align: right;
        margin-right: 7px;
    }

    [data-ref*=".line_total-td"] {
        white-space: nowrap;
    }

    /* Tabelle von Zwischensumme bis Endbetrag */
    #table-totals .totals-table-right-side>* {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    /* &Ouml;ffentliche Bemerkung */
    [data-ref="total_table-public_notes"] { font-weight: normal; } 

    /* Zahlungsbedingungen */
    [data-ref="total_table-terms"] { 
        display: grid;
        font-weight: normal;
        font-size: 9pt;
        line-height: 1.2;
    }

    .stamp {
        transform: rotate(12deg);
        color: #555;
        font-size: 3rem;
        font-weight: 700;
        border: 0.25rem solid #555;
        display: inline-block;
        padding: 0.25rem 1rem;
        text-transform: uppercase;
        border-radius: 1rem;
        font-family: 'Courier';
        mix-blend-mode: multiply;
        z-index:200 !important;
        position:  fixed;
        text-align: center;
    }

    .is-paid {
        color:  #D23;
        border: 1rem double  #D23;
        transform: rotate(-5deg);
        font-size: 6rem;
        font-family: "Open sans", Helvetica, Arial, sans-serif;
        border-radius: 0;
        padding: 0.5rem;
        opacity: 0.2;
        z-index:200 !important;
        position:  fixed;
        display: none;
    }
    /* Einstellungen f&uuml;r das, was unter der Artikelliste kommt */

    .project-header {
        font-size: 1.2em;
        margin-top: 0.1em;
        margin-bottom: 0;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    /*color: #505050; */
    }
    /* ENDE Tabelle von Zwischensumme bis Endbetrag */


    /** QR-Code **/
    #pqrcode-svg svg {
        width: 100px;
        height: auto;
    }

    /** Die sich je Seite wiederholende Fu&szlig;zeile (FOOTER) **/
    .footer,
    .repeating-footer-space {
        min-height: 4.1cm;
    }

    .repeating-footer-space {
        width: 100%;
        margin-right: 2cm;
        border: 3px solid red;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 23mm;             /* inkl. Seitenrand und Korrektur */
        margin-bottom: 1.1cm;          
        border-top: 1px solid #000;
        width: 165mm;   /* Breite DIN A4 abzgl. Seitenr&auml;nder (in mm): 210 &ndash; 25 &ndash; 20 = 165 */
        padding-top: 0.5rem;
        margin-top: 20px;
        
    }

    #footer-address-table {
        display: grid;
        grid-template-columns: 21% 6% 18% 10% 15% auto;
        grid-template-areas: "a b c d e f";
        gap: 6px;
        justify-content: left;
        font-size: 8pt;
        margin-left: 2pt;
        line-height: 1.3;
        vertical-align: top;
    }
    /** ENDE Fu&szlig;zeile **/

</style></head><body><div class="repeating-header">
    <div class="logo-container">
        <img class="company-logo" src="data:image/png;base64,XXX">
    </div>
    <div class="entity-container">
        <div id="entity-label">
            Rechnung
        </div>
        <table id="entity-details" cellspacing="0" cellpadding="0">
            <th>Kundennummer</th> <th> </th>
        <tr><th data-state="encoded-html" data-ref="entity_details-invoice.number_label">&lt;p&gt;Rechnungsnummer&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="entity_details-invoice.number">&lt;p&gt;5025964551264&lt;/p&gt;
</th></tr><tr><th data-state="encoded-html" data-ref="entity_details-invoice.date_label">&lt;p&gt;Rechnungsdatum&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="entity_details-invoice.date">&lt;p&gt;18.11.1994&lt;/p&gt;
</th></tr><tr><th data-state="encoded-html" data-ref="entity_details-invoice.custom1_label">&lt;p&gt;Leistungsdatum&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="entity_details-invoice.custom1">&lt;p&gt;20.06.2004&lt;/p&gt;
</th></tr><tr><th data-state="encoded-html" data-ref="entity_details-invoice.po_number_label">&lt;p&gt;Bestellnummer&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="entity_details-invoice.po_number">&lt;p&gt;Corrupti.&lt;/p&gt;
</th></tr><tr hidden="1"><th data-state="encoded-html" data-ref="entity_details-invoice.project_label">&lt;p&gt;5025964551264.project_label&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="entity_details-invoice.project">&lt;p&gt;5025964551264.project&lt;/p&gt;
</th></tr></table>
    </div>
</div><div id="body">
<table style="width: 100%;">
    <thead>
        <div id="repeating-header-space">
        </div>
    </thead>

    <!-- Ab hier beginnt der Brief-Inhalt mit dem Adressfeld -->
    <tbody class="din5008">
        <tr>
            <td>
                <!-- Ab hier geht es mit dem "Textfeld" gem. DIN 5008 los -->
                <div id="textfeld-din5008">
                    <div id="content-erste-Seite"> <!-- Spezieller Bereich, der in den Header-Bereich &uuml;berlappen kann -->
                        <div id="adressfeld-container">
                            <div id="absenderzeile">Numba.one IT-Services | Emscherweg 14 | 30629 Hannover</div>
                            <div id="empfangsadresse">
                                <div id="client-details"><p data-state="encoded-html" data-ref="client_details-client.name">&lt;p&gt;Konopelski-Murazik&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-client.custom1">&lt;p&gt;1990-09-03 17:11:44&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-client.address2">&lt;p&gt;679 Cole Common&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-client.address1">&lt;p&gt;826&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-client.postal_city">&lt;p&gt;69697 Hillsside&lt;/p&gt;
</p></div>
                                <div id="vendor-details"></div>
                                <div id="shipping-details"><p data-state="encoded-html" data-ref="shipping_address-label" style="font-weight: bold; text-transform: uppercase">&lt;p&gt;Lieferadresse&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-shipping-client.shipping_address2">&lt;p&gt;2474 Mandy Station Apt. 559&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-shipping-client.shipping_address1">&lt;p&gt;447&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="client_details-shipping-client.shipping_postal_city">&lt;p&gt;87449 Erinchester&lt;/p&gt;
</p></div>
                            </div>
                        </div>
                    </div>

                    <!-- Ab hier sind Header und Footer heilig! -->
                    <div id="betreffzeile">Rechnung Nr. 5025964551264</div>
                    <div id="betreffhinweis">Bei Zahlung oder Korrespondenz immer angeben!</div>
                    <br>
                    <p></p>
                    <br>
                    <p>dankend f&uuml;r Ihren Auftrag und das damit in mich gesetzte Vertrauen darf ich wie folgt in Abrechnung bringen:</p>
                    <br>
                    <!-- Ab hier die eigentliche Abrechnung in Tabellenform
                        (Stichwort: style -> table > tbody) -->
                    <table id="product-table" cellspacing="0" data-ref="table"><thead><th data-state="encoded-html" data-ref="product_table-product.item-th" hidden="1">&lt;p&gt;Artikel&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.description-th" hidden="1">&lt;p&gt;Beschreibung&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.unit_cost-th" hidden="1">&lt;p&gt;Preis&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.quantity-th" hidden="1">&lt;p&gt;Menge&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.discount-th" hidden="1">&lt;p&gt;Rabatt&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.tax1-th" hidden="1">&lt;p&gt;Steuer&lt;/p&gt;
</th><th data-state="encoded-html" data-ref="product_table-product.line_total-th" hidden="1">&lt;p&gt;Summe&lt;/p&gt;
</th></thead><tbody><tr><td data-state="encoded-html" data-ref="product_table-product.item-td">&lt;p&gt;ducimus&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.description-td">&lt;p&gt;Alice, Have you.&lt;/p&gt;
</td><td data-state="encoded-html" style="white-space: nowrap;" data-ref="product_table-product.unit_cost-td">&lt;p&gt;&euro;947,45&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.quantity-td">&lt;p&gt;4&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.discount-td">&lt;p&gt;&euro;7,00&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.tax1-td">&lt;p&gt;10%&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.line_total-td">&lt;p&gt;&euro;3.789,80&lt;/p&gt;
</td></tr><tr><td data-state="encoded-html" data-ref="product_table-product.item-td">&lt;p&gt;aspernatur&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.description-td">&lt;p&gt;Knave. The Knave.&lt;/p&gt;
</td><td data-state="encoded-html" style="white-space: nowrap;" data-ref="product_table-product.unit_cost-td">&lt;p&gt;&euro;411,63&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.quantity-td">&lt;p&gt;3&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.discount-td">&lt;p&gt;&euro;2,00&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.tax1-td">&lt;p&gt;10%&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.line_total-td">&lt;p&gt;&euro;1.234,89&lt;/p&gt;
</td></tr><tr><td data-state="encoded-html" data-ref="product_table-product.item-td">&lt;p&gt;dolorem&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.description-td">&lt;p&gt;Dinah my dear! I.&lt;/p&gt;
</td><td data-state="encoded-html" style="white-space: nowrap;" data-ref="product_table-product.unit_cost-td">&lt;p&gt;&euro;427,50&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.quantity-td">&lt;p&gt;3&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.discount-td">&lt;p&gt;&euro;10,00&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.tax1-td">&lt;p&gt;10%&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.line_total-td">&lt;p&gt;&euro;1.282,50&lt;/p&gt;
</td></tr><tr><td data-state="encoded-html" data-ref="product_table-product.item-td">&lt;p&gt;vitae&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.description-td">&lt;p&gt;I was thinking I.&lt;/p&gt;
</td><td data-state="encoded-html" style="white-space: nowrap;" data-ref="product_table-product.unit_cost-td">&lt;p&gt;&euro;170,65&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.quantity-td">&lt;p&gt;7&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.discount-td">&lt;p&gt;&euro;6,00&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.tax1-td">&lt;p&gt;10%&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.line_total-td">&lt;p&gt;&euro;1.194,55&lt;/p&gt;
</td></tr><tr><td data-state="encoded-html" data-ref="product_table-product.item-td">&lt;p&gt;voluptate&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.description-td">&lt;p&gt;An obstacle that.&lt;/p&gt;
</td><td data-state="encoded-html" style="white-space: nowrap;" data-ref="product_table-product.unit_cost-td">&lt;p&gt;&euro;279,71&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.quantity-td">&lt;p&gt;6&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.discount-td">&lt;p&gt;&euro;7,00&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.tax1-td">&lt;p&gt;10%&lt;/p&gt;
</td><td data-state="encoded-html" data-ref="product_table-product.line_total-td">&lt;p&gt;&euro;1.678,26&lt;/p&gt;
</td></tr></tbody></table>
                    <table id="task-table" cellspacing="0" data-ref="table"></table>
                    <table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
                    <table id="statement-invoice-table" cellspacing="0" data-ref="table"></table>
                    <div id="statement-invoice-table-totals" data-ref="statement-totals"></div>
                    <table id="statement-payment-table" cellspacing="0" data-ref="table"></table>
                    <div id="statement-payment-table-totals" data-ref="statement-totals"></div>
                    <table id="statement-credit-table" cellspacing="0" data-ref="table"></table>
                    <div id="statement-credit-table-totals" data-ref="statement-totals"></div>
                    <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
                    <div id="statement-aging-table-totals" data-ref="statement-totals"></div>

                    <!-- Folgende Zeile beinhaltet ALLES hinsichtlich dem, 
                    was unterhalb der Positionstabelle kommt //-->
                    <div id="table-totals" cellspacing="0" dir="ltr"><div class="stamp is-paid"> Bezahlt</div><div style="display: flex; flex-direction: column;"><p data-state="encoded-html" data-ref="total_table-public_notes" style="text-align: left;">&lt;p&gt;Sample Public Notes&lt;/p&gt;
</p><p style="text-align: left; display: flex; flex-direction: column; page-break-inside: auto;"><span data-state="encoded-html" data-ref="total_table-terms-label" style="font-weight: bold; text-align: left; margin-top: 1rem;">&lt;p&gt;Rechnungsbedingungen:&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="total_table-terms" style="text-align: left;">&lt;p&gt;Sofort und ohne Abzug f&auml;llig. Verzugsfrei zahlbar bis zum 30.01.2003. &Uuml;berweisung unter Angabe von &lt;strong&gt;Rechnungsnr.&nbsp;5025964551264&lt;/strong&gt; und &lt;strong&gt;Kundennr.&nbsp; &lt;/strong&gt; auf folgendes Konto: &lt;strong&gt;IBAN&nbsp;DEXX&nbsp;XXXX&nbsp;XXXX&nbsp;XXXX&nbsp;XXXX&nbsp;XX&lt;/strong&gt; (XXX&nbsp;XXX&nbsp;XXX&nbsp;XXXX)&lt;/p&gt;
</span></p><img style="max-width: 50%; height: auto;" src="" id="contact-signature"><div style="display: flex; align-items: flex-start; page-break-inside: auto;"><img src="https://invoicing.co/images/new_logo.png" style="height: 2.5rem; margin-top: 1.5rem;" id="invoiceninja-whitelabel-logo"></div></div><div class="totals-table-right-side" dir="ltr"><div><span data-state="encoded-html" data-ref="totals_table-subtotal-label">&lt;p&gt;Zwischensumme&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals_table-subtotal">&lt;p&gt;&euro;8.572,61&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals_table-discount-label">&lt;p&gt;Rabatt 2%&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals_table-discount">&lt;p&gt;&euro;171,45&lt;/p&gt;
</span></div><div><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge1-label">&lt;p&gt;&lt;/p&gt;
</span><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge1">&lt;p&gt;&euro;0,00&lt;/p&gt;
</span></div><div><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge2-label">&lt;p&gt;&lt;/p&gt;
</span><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge2">&lt;p&gt;&euro;0,00&lt;/p&gt;
</span></div><div><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge3-label">&lt;p&gt;&lt;/p&gt;
</span><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge3">&lt;p&gt;&euro;0,00&lt;/p&gt;
</span></div><div><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge4-label">&lt;p&gt;&lt;/p&gt;
</span><span data-state="encoded-html" hidden="1" data-ref="totals_table-custom_surcharge4">&lt;p&gt;&euro;0,00&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals-table-total_tax_0-label">&lt;p&gt;GST 10%&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals-table-total_tax_0">&lt;p&gt;&euro;840,12&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals-table-total_tax_1-label">&lt;p&gt;VAT 17.5%&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals-table-total_tax_1">&lt;p&gt;&euro;1.470,20&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals-table-line_tax_0-label">&lt;p&gt;GST 10%&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals-table-line_tax_0">&lt;p&gt;&euro;840,12&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals_table-total-label">&lt;p&gt;Gesamt&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals_table-total">&lt;p&gt;&euro;11.551,60&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals_table-paid_to_date-label">&lt;p&gt;Bereits gezahlt&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals_table-paid_to_date">&lt;p&gt;&euro;0,00&lt;/p&gt;
</span></div><div><span data-state="encoded-html" data-ref="totals_table-outstanding-label">&lt;p&gt;Offener Betrag&lt;/p&gt;
</span><span data-state="encoded-html" data-ref="totals_table-outstanding">&lt;p&gt;&euro;11.551,60&lt;/p&gt;
</span></div><div><span></span><span></span></div></div></div>
                    <!-- Ende der Abrechnung -->
                    <div>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        <p id="qrcode-svg"><svg viewbox="0 0 200 200" width="200" height="200" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
          <rect (...)"></path></g></g></svg>
</svg></p>
                     </div>
                </div>
            </td>
        </tr>
    </tbody>

    <tfoot> <!-- Der sich auf jeder Seite wiederholende Footer -->
        <tr>
            <td>
                <div class="repeating-footer-space"></div>
            </td>
        </tr>
    </tfoot>
</table>
</div>

<div class="footer"> <!-- Ganz wichtig, dass es id="footer" ist!-->
    <div style="width: 100%;">
        <div class="footer-address-table">
            <div id="company-address"><p data-state="encoded-html" data-ref="company_address-company.name">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_address-company.address2">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_address-company.address1">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_address-company.postal_city">&lt;p&gt;XXX&lt;/p&gt;
</p></div>
            <div id="company-details-prefix">
                Tel.:
                <br>Fax:
                <br>E-Mail:
                <br>Web:
            </div>
            <div id="company-details"><p data-state="encoded-html" data-ref="company_details-company.phone">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_details-company.custom3">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_details-company.email">&lt;p&gt;XXX&lt;/p&gt;
</p><p data-state="encoded-html" data-ref="company_details-company.website">&lt;p&gt;XXX&lt;/p&gt;
</p></div>
            <div id="company-legals-prefix">
                HRA:
                <br>Reg.-Ger.:
                <br>USt.-IdNr.:
                <br>Steuernr.:
            </div>
            <div id="company-legals">
                folgt
                <br>XXX
                <br>folgt
                <br>XXX
            </div>
            <div>
                XXX
                <br>XXX
                <br>XXX
            </div>
        </div>
	
	
	    <script>
            // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
            document.addEventListener('DOMContentLoaded', () => {
                let tables = [
                    'product-table', 'task-table', 'delivery-note-table',
                    'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
                    'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',
                    'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',
                ];

                tables.forEach((tableIdentifier) => {
                    console.log(document.getElementById(tableIdentifier));

                    document.getElementById(tableIdentifier)?.childElementCount === 0
                        ? document.getElementById(tableIdentifier).style.setProperty('display', 'none', 'important')
                        : '';
                });
            });
        </script>
    </div>
</div></body></html>

PS: I’m using MariaDB instead of MySQL (Docker-File by (un-) commenting edited), if this could be important.