Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.23k stars 686 forks source link

Background-Color for <td>-element on pagebreaks #1102

Open MarcDuevel opened 4 years ago

MarcDuevel commented 4 years ago

I've got a really weird problem with the background-color of an <td> element that has a page-break inside their rowspan. As you can see in the screenshots it should render the background-color on both pages, it just doesn't do it.

Screenshot1 Screenshot2

Also weird is that it seems to be handled diffently in some cases, not sure what the difference between this two shown behaviors is. I'll add the html-template file and css used to generate the table and also the html for this specific table in the screenshot at the end.

Hopefully someone has an idea what I can do about it, I'm really stuck right now.

And another question: is there any way to add a bottom-border to the last row of the table on a page and rerender the text inside on the next page again?

Before someone mentions the page-break-inside: avoid-attribute, I'm familiar with that, the problem is it can't help me, because some of the sections in this table are way bigger than one page (maybe not with this data but it is possible and does happen) so I just can't keep the sections together and break afterwards.

Appreciate every comment that could help me!

CSS:

    general_css = weasyprint.CSS(
        string='''
            @page {
              size: A4 landscape;
              margin: 4cm 0.5cm 1cm 0.5cm;

              @bottom-right {
                content: "Seite " counter(page) " von " counter(pages);
                font-family: "Arial" !important;
                font-size: 9px !important;
                padding-right: 24px;
                padding-bottom: 7px;
              }
            }
            @page:first {
              margin: 2.5cm 0.5cm 1cm 0.5cm;
            }

            header {
              width: 98.5%;
              top: 0;

            }
            header:not(.first-page-header) {
              height: 3.4cm;
              max-height: 3.4cm;
              margin: auto;
              margin-top: -3.4cm;
              position: fixed;
            }
            /*
             * The header for all other pages is positioned fixed, thus is also present at the first page.
             * With the use of z-index and a pseudo-element that header is covered by the header of the title-page.
             */
            header.first-page-header {
              background-color: white;
              margin-top: -1.8cm;
              position: absolute;
              z-index: 10;
            }
            header.first-page-header:after {
              background-color: white;
              content: '';
              width: 100%;
              height: 1cm;
              border-right: 2px solid white;
              border-left: 2px solid white;
              box-sizing: content-box;
              top: -1cm;
              position: absolute;
            }

            footer {
              font-size: 9px;
              text-align: right;
              left: 0;
              bottom: 0;
              position: fixed;
              height: 0.5cm;
              padding-left: 24px;
              margin-bottom: -0.8cm;
            }

            body {
              font-family: "Arial" !important;
              font-style: "normal";
              font-size: 9px;
            }
            body * {
              box-sizing: border-box;
            }

            table {
              border-collapse: collapse;
              width: 100%;
              page-break-inside: auto;
            }

            tr {
              page-break-inside:auto;
              break-inside:auto;
              page-break-after:auto;
            }

            table,
            th,
            td {
              page-break-inside: auto;
              break-inside: auto;
              page-break-after: auto;
            }

            th,
            td {
              border: 1px solid black;
            }

            th {
              padding: 4px;
            }

            td {
              vertical-align:top;
            }

            h2 {
              font-size: 14px;
            }

            h3 {
              font-size: 12px;
            }

            p {
              font-size: 10px;
            }

            .header-container td > p,
            h2,
            h3,
            img {
              margin: 0 ;
            }

            li > p {
              text-decoration: underline;
            }

            .title-container {
              height: 600px;
              padding-top: 5px;
              border: 1px solid black;
              display: flex;
              flex-direction: row;
            }

            .left-box {
              width: 50%;
              padding: 16px 0 8px 10px;
            }

            .right-box {
              width: 45%;
              padding: 16px 16px 8px 32px;
            }

            .information-container {
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              margin: 0 0 8px 0;
            }

            .data-left-container > p {
              margin: 0;
            }

            .data-right-container > p {
              margin: 3px;
              width: 200px;
              text-decoration: underline black;
            }

            .data-underline {
              padding-bottom: 2px;
              font-size: 12px;
            }

            .empty_line {
              width: 200px;
              border-bottom: 1px solid;
              position: relative;
            }
            .empty_line img {
              top: -4px;
              left: -14px;
              position: absolute;
            }

            .data-line {
              border-bottom: 1px solid;
              width: 100%;
            }

            .data-line-empty {
              border-bottom: 1px solid;
              width: 100%;
              height: 6px;
            }

            .data-line > p {
              margin: 0;
            }

            empty {
              content: '_';
              visibility: hidden;
            }

            .data-title {
              font-weight: 600;
              font-size: 12px;
            }

            .size-12 {
              font-size: 12px;
            }

            .size-14 {
              font-size: 14px;
            }

            .margin-18-0 {
              margin: 18px 0;
            }

            ol {
              padding-left: 16px;
              margin-left: 16px;
            }

            ol > li {
              font-size: 12px;
            }

            .alt:before {
              background-color:red;
            }

            .two-fields {
              display: flex;
              width: 50%;
              justify-content: space-between;
            }

            .pink-box {
              background-color: #ec0bc7;
              width: 100%;
              min-height: 1.2mm;
              border-right: 1px solid black;
              border-left: 1px solid black;
            }
        ''')

[...]
    document = weasyprint.HTML(
            string=rendered_template_1+rendered_template_2,
            url_fetcher=url_fetcher
        ).render(stylesheets=[general_css])

Table-Template-File:

{% load get_protective_measures_count_with_same_danger_id %}
{% load order_protective_measures_by_danger_id_and_risk %}

<table style="width: 100%; min-width: 100%; max-width: 100%;">
    {% for assessment_activity in assessment_activities %}

    {% order_protective_measures_by_danger_id_and_risk assessment_activity.assessment_protective_measures.all as assessment_protective_measures %}

    {% for assessment_protective_measure in assessment_protective_measures %}
      <tr>
        {% if forloop.first %}
          <td
            rowspan="{{ assessment_activity.assessment_protective_measures.all.count }}"
            style="padding: 4px; max-width: 165px; width: 164px;"
          >
            {{ assessment_activity.activity.name }}
          </td>
        {% endif %}

        {% ifchanged assessment_protective_measure.danger.id %}
          {% get_protective_measures_count_with_same_danger_id assessment_activity.assessment_protective_measures.all assessment_protective_measure.danger.id as protective_measures_count %}

          <td
            rowspan="{{ protective_measures_count }}"
            style="padding: 4px; max-width: 200px; width: 200px;"
          >
            {{ assessment_protective_measure.danger.name }}
          </td>
          {% if assessment_protective_measure.danger.risk == 1 %}
            <td
              rowspan="{{ protective_measures_count }}"
              style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
            >
              {{ assessment_protective_measure.danger.risk }}
            </td>
          {% elif assessment_protective_measure.danger.risk == 2 %}
            <td
              rowspan="{{ protective_measures_count }}"
              style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
            >
              {{ assessment_protective_measure.danger.risk }}
            </td>
          {% elif assessment_protective_measure.danger.risk == 3 %}
            <td
              rowspan="{{ protective_measures_count }}"
              style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
            >
              {{ assessment_protective_measure.danger.risk }}
            </td>
          {% endif %}
        {% endifchanged %}

        <td style="padding: 4px;">
          {{ assessment_protective_measure.protective_measure.description }}
        </td>

        {% if forloop.first %}
          <td
            rowspan="{{ assessment_activity.assessment_protective_measures.all.count }}"
            style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
          >
            {% if assessment_activity.activity.applicable_regulations %}
              {{ assessment_activity.activity.applicable_regulations }}
            {% else %}
              {{ "" }}
            {% endif %}
          </td>
        {% endif %}

        {% if assessment_protective_measure.effective %}
          <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
          </td>
          <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            {{ "" }}
          </td>
        {% else %}
          <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            {{ "" }}
          </td>
          <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
          </td>
        {% endif %}

        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
          {{ "" }}
        </td>
      </tr>
    {% endfor %}
  {% endfor %}
</table>

Table-HTML-Outcome: (Yeah it's a pretty big table...)

<header class="">
    <div class="header-container">
        <table>
            <tr>
                <td rowspan="2" align="center" style="text-align: center; vertical-align: middle; width: 164px;">
                    <img
                            src="static://img/image2.jpg"
                            style="width: 95px;"
                            alt="logo1"
                    />
                </td>
                <th style="min-height: 40px; max-height: 40px; height: 40px; text-align: center; vertical-align: middle;"
                    colspan="4">
                    <h2 style="padding: 0; margin: 0;">Nunquam magicae domina.</h2>
                    <p style="padding: 0; margin: 0;">Ridetis inciviliter ducunt ad emeritis adiurator.</p>
                </th>
                <td rowspan="2" align="center" style="text-align: center; vertical-align: middle; width: 148px;"
                    colspan="3">
                    <img
                            src="static://img/a.png"
                            style="width: 105px;"
                            alt="logo2"
                    />
                </td>
            </tr>
            <tr>
                <th style="min-height: 40px; max-height: 40px; height: 40px; text-align: center; vertical-align: middle;"
                    colspan="4">
                    <h3 style="padding: 0; margin: 0;">Torquis</h3>
                    <p style="padding: 0; margin: 0;">
                        Virundum :&nbsp;<span style="padding: 0; margin: 0; text-decoration: underline;">Nunquam examinare absolutio.</span>
                    </p>
                </th>
            </tr>
            <tr>
                <th rowspan="2" style="max-width: 164px; width: 164px;">
                    Tätigkeiten (chronologisch)
                </th>
                <th rowspan="2" style="max-width: 200px;width: 200px;">
                    Mögliche Gefährdungen / Risiken
                </th>
                <th rowspan="2" style="width: 35px; min-width: 35px; max-width: 35px;">
                    Risiko
                </th>
                <th rowspan="2">
                    Schutzmaßnahmen
                </th>
                <th rowspan="2" style="width: 100px; min-width: 100px; max-width: 100px;">
                    Geltende Vorschriften
                </th>
                <th colspan="2" style="width: 62px; min-width: 62px; max-width: 62px;">
                    wirksam?
                </th>
                <th rowspan="2" style="width: 86px; min-width: 86px; max-width: 86px;">
                    Kontrolle
                </th>
            </tr>

            <tr>
                <th style="width: 30px; min-width: 30px; max-width: 30px;">
                    ja
                </th>
                <th style="width: 30px; min-width: 30px; max-width: 30px;">
                    nein
                </th>
            </tr>
        </table>
        <div class="pink-box"></div>
    </div>
</header>
<table style="width: 100%; min-width: 100%; max-width: 100%;">
    <tr>
        <td
                rowspan="34"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Habenas cantare!
        </td>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Sunt accentores experientia clemens, gratis habitioes.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Cur adgium cantare? Altus, fortis nixs virtualiter anhelare de mirabilis, albus lacta.
        </td>
        <td
                rowspan="34"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            Mare
            Amivadum
            VIGIL
            VENTUSS VOLARE!
            CUR CALCARIA NOCERE?
            CUR ELOGIUM IRE?
            CUR IGNIGENA PEREGRINATIONE?
            NUNQUAM IMPERIUM ADIURATOR.
            NUNQUAM DEMITTO GABALIUM.
            CUR NIX PERSUADERE?
            CUR NIXUS CREDERE?
            CUR DETRIUS CADUNT?
            NUNQUAM MAGICAE PARMA.
            NUNQUAM GRATIA EXTUM.
            CUR LANISTA MESSIS?
            CUR NAVIS TRABEM?
            NUNQUAM AMOR HISTORIA.
            CUR DOMUS POTUS?
            NUNQUAM TRACTARE SPECIES.
            CUR DEMISSIO TRABEM?
            ABSOLUTIOS MORI!
            HOMOS UNDA!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Tubinga:
        </td>
        <td
                rowspan="2"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Caculas mori! Axona de audax abactus, anhelare fermium! Potus saepe ducunt ad superbus era. Audax lacteas
            ducunt ad equiso. Cur torus experimentum? Varius, audax elogiums vix experientia de gratis, lotus castor.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nunquam vitare sensorem. Galatae, cursus, et exsul. Heu, bubo! Hibridas experimentum, tanquam germanus
            lanista. Ecce, velox fermium! Hercle, sensorem fatalis!, placidus abaculus! Cum lixa congregabo, omnes
            fraticinidaes attrahendam fidelis, velox bullaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cantare unus ducunt ad alter boreas.
        </td>
        <td
                rowspan="2"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Resistentias sunt bubos de pius hippotoxota.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Vae, zeta! Brevis, camerarius vortexs grauiter locus de talis, azureus luna.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="9"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Ubi est gratis habitio?
        </td>
        <td
                rowspan="9"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Tuss sunt verpas de mirabilis fuga. Rumors manducare! Ecce, hydra! Secula experimentums, tanquam azureus
            musa. Fortiss cantare in brema! A falsis, humani generis emeritis abactus. Est gratis adgium, cesaris.
            Regius, varius voxs virtualiter quaestio de camerarius, altus lacta.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nunquam imperium guttus. Cum amor persuadere, omnes galataees manifestum rusticus, domesticus advenaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Favere superbe ducunt ad fidelis lanista.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Danistas experimentum, tanquam teres adiurator. Ubi est fatalis epos? Secundus, bi-color urias solite
            resuscitabo de flavum, placidus bubo.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum era cantare, omnes armariumes aperto salvus, fidelis zirbuses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt urbses promissio noster, lotus fermiumes. Cur nuclear vexatum iacere credere? Cobaltums ortum in raptus
            avenio! Cum axona peregrinationes, omnes orexises resuscitabo audax, flavum advenaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt repressores carpseris fortis, clemens diatriaes. Cur candidatus trabem? Omnia, hibrida, et orexis.
            Clemens, peritus decors aliquando demitto de germanus, primus epos.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Lunas tolerare in audax amivadum! Acipensers cadunt! A falsis, equiso pius solem. Cum poeta persuadere,
            omnes orexises locus festus, brevis luraes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Ecce, elevatus! Triticum germanus canis est. Nunquam amor demolitione. Cum orexis velum, omnes scutumes
            examinare emeritis, pius nuptiaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="3"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Est peritus hilotae, cesaris.
        </td>
        <td
                rowspan="3"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Poeta de flavum finis, imperium elevatus! Nunquam magicae brodium. Sunt genetrixes contactus bassus, brevis
            torquises. Turpiss ridetis, tanquam fortis tumultumque. Pulchritudines accelerare! Buxums observare in
            fidelis cirpi! Nobilis, emeritis speciess diligenter carpseris de fatalis, fidelis parma.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nobilis, fidelis paluss semper dignus de fatalis, mirabilis barcas.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Est raptus tabes, cesaris. Fidelis vox etiam consumeres capio est. Peritus, neuter extums patienter tractare
            de emeritis, velox poeta.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Germanus, peritus competitions recte talem de talis, velox lacta.
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Mens, silva, et terror. Vae. Sunt parmaes demitto peritus, varius habenaes. Burguss sunt caculas de bi-color
            cobaltum. Messis callide ducunt ad nobilis frondator.
            Cum buxum crescere, omnes fermiumes imperium lotus, castus silvaes.
            Cum nuptia mori, omnes homoes talem varius, ferox glutenes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Fluctui de raptus olla, visum homo!
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Cum vox persuadere, omnes nutrixes imperium altus, fortis homoes.
            Cum coordinatae nocere, omnes amicitiaes transferre azureus, brevis visuses.
            Peritus cedriums ducunt ad exemplar. Cum devirginato volare, omnes mineralises tractare bi-color, gratis
            peses.
            Cum calcaria nocere, omnes competitiones acquirere festus, flavum parses.
            Velox gloss ducunt ad brabeuta.
            Spatiis prarere, tanquam germanus repressor.
            A falsis, abactor fortis byssus.
            Sunt calcariaes experientia salvus, secundus candidatuses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Canis:
        </td>
        <td
                rowspan="2"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Cum cotta studere, omnes adiuratores anhelare alter, camerarius assimilatioes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum species persuadere, omnes calceuses aperto emeritis, bi-color fortises.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Velox, lotus zeluss foris imitari de audax, camerarius urbs.
        </td>
        <td
                rowspan="2"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Ecce, fidelis frondator! Clabulares sunt agripetas de pius habitio. Vox experimentums, tanquam alter
            historia. Pol, cedrium! Festus, pius tabess nunquam consumere de flavum, regius lamia.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Est regius nix, cesaris. Cur indictio assimilant? Est alter deus, cesaris. Lotus, fatalis competitions
            superbe captis de neuter, superbus lactea.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Peregrinationes grauiter ducunt ad raptus canis.
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Barcass crescere, tanquam raptus amicitia. A falsis, mens rusticus detrius. Abactor studeres, tanquam salvus
            accola. Flavum, bassus bromiums inciviliter amor de salvus, altus habena.
            Sunt messores tractare germanus, camerarius spatiies.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Albus, superbus idoleums inciviliter quaestio de placidus, dexter equiso.
        </td>
        <td
                rowspan="5"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Nunquam vitare hydra. Cum lixa mori, omnes guttuses dignus germanus, neuter glutenes.
            Est raptus plasmator, cesaris. Cum lactea credere, omnes paluses magicae teres, gratis diatriaes. A falsis,
            vortex bassus plasmator. Heu. Vae, azureus indictio! Nunquam acquirere cacula. Cum indictio cadunt, omnes
            apolloniateses manifestum salvus, talis idoleumes.

        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum gallus mori, omnes mensaes carpseris secundus, altus compateres. Sunt onuses captis varius, placidus
            cliniases.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum cacula potus, omnes contencioes imperium audax, emeritis idoleumes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Plasmator, fluctui, et agripeta. Lactas prarere in placidus cubiculum! Cum gabalium accelerare, omnes menses
            contactus rusticus, neuter devatioes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nunquam pugna mensa.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Gemna de castus genetrix, prensionem pes.
        </td>
        <td
                rowspan="1"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            A falsis, sectam emeritis gluten. Ionicis tormento de bi-color galatae, consumere sensorem!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Zeluss sunt adgiums de velox era.
        </td>
        <td
                rowspan="2"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Zetas sunt amors de fidelis buxum. Demolitione potuss, tanquam ferox bromium. Rusticus, superbus adelphiss
            acceleratrix reperire de fortis, placidus exemplar.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Grandis, neuter nomens tandem contactus de varius, ferox absolutio.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cur torus velum?
        </td>
        <td
                rowspan="2"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Glutens sunt caniss de albus gabalium.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt habitioes experientia teres, clemens mortemes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="16"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Caesiums volare!
        </td>
        <td
                rowspan="9"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Sunt buboes examinare secundus, camerarius adgiumes.
        </td>
        <td
                rowspan="9"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Sunt animalises vitare clemens, ferox coordinataees.
            Cum liberi ortum, omnes silvaes pugna albus, mirabilis tabeses.
        </td>
        <td
                rowspan="16"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >

            CAPIOS VELUM!
            CUR FISCINA MORI?

        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Rectors sunt acipensers de barbatus caesium!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt burguses examinare dexter, germanus cursuses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Regius, pius hilotaes acceleratrix amor de primus, neuter byssus.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Parmas observare, tanquam albus domina.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Rumors volare, tanquam fidelis deus. Cum calceus ortum, omnes deuses dignus clemens, placidus gabaliumes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Dexter, alter solitudos acceleratrix fallere de festus, velox fermium.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Lotus tus una manifestums abactor est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Barbatus, fortis eras sensim imitari de domesticus, velox liberi.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="6"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Sunt diatriaes resuscitabo regius, talis rumores.
        </td>
        <td
                rowspan="6"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Cotta de castus cacula, perdere cannabis!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Lixas observare!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            A falsis, rumor secundus danista.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Fidelis solitudos ducunt ad fluctui. Cum planeta trabem, omnes itineris tramitemes vitare bassus, pius
            poetaes.
            Nixuss sunt racanas de regius ignigena.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Xiphiass ridetis!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Messis virtualiter ducunt ad altus index.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cum mortem crescere, omnes omniaes pugna noster, peritus aususes.
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Lotus, fatalis gabaliums tandem prensionem de noster, grandis abaculus.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="7"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Varius boreass ducunt ad exsul.
        </td>
        <td
                rowspan="7"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Capio
        </td>
        <td
                rowspan="7"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Sunt fraticinidaes imperium mirabilis, salvus zirbuses. Apolloniatess sunt hilotaes de azureus stella.
            Abaculus crederes, tanquam superbus capio.
        </td>
        <td
                rowspan="7"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            Est placidus navis, cesaris.
            NUNQUAM TRACTARE LACTEA.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum exsul experimentum, omnes aususes transferre gratis, talis indictioes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum domus persuadere, omnes barcases carpseris brevis, alter adelphises.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Est germanus olla, cesaris. Cum cotta potus, omnes fluctuies attrahendam camerarius, fortis heureteses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Gabaliums volare in cella! Gratis, azureus agripetas velox dignus de albus, regius adelphis.
            Burguss sunt humani generiss de secundus usus.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Domesticus, velox accolas aegre gratia de flavum, azureus canis.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Solem magnum finis est. Festus, mirabilis accolas patienter aperto de fortis, pius abnoba.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="13"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam prensionem armarium.
        </td>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Heuretess crescere!
        </td>
        <td
                rowspan="2"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Armariums studere in peritus cirpi! Pius seculas ducunt ad compater. Cum spatii prarere, omnes valebates
            talem teres, germanus bursaes.
        </td>
        <td
                rowspan="13"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            Compater teres brodium est.
            NUNQUAM PUGNA COTTA.
            Nunquam perdere triticum.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt habitioes fallere pius, fidelis lunaes. Pol, a bene humani generis, teres lanista! Sunt solitudoes
            transferre rusticus, gratis accolaes. Contencios sunt decors de fatalis brabeuta.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Elogiums assimilant!
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Sunt vigiles attrahendam salvus, festus devirginatoes. Credere virtualiter ducunt ad bassus vortex.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="9"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Salvus, grandis competitions inciviliter fallere de secundus, brevis liberi.
        </td>
        <td
                rowspan="9"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Advenas ortum in chremisa! A falsis, torquis varius consilium. A falsis, abnoba nobilis cotta. Brevis,
            dexter magisters rare acquirere de ferox, superbus devirginato.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Emeritis elogium nunquam convertams pulchritudine est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Ratione de dexter orexis, amor canis!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum sensorem resistere, omnes hippotoxotaes tractare albus, raptus galataees.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Ubi est salvus lamia? Ratione experimentums, tanquam festus bulla. Nobilis, salvus spatiis recte attrahendam
            de regius, noster solitudo.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Exemplar de placidus uria, desiderium pars! Cum fuga peregrinationes, omnes demissioes contactus rusticus,
            bassus lumenes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            A falsis, competition flavum musa. Cum magister mori, omnes eraes talem nobilis, placidus gloses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Placidus tumultumque virtualiter convertams glos est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            A falsis, fluctui gratis lanista. Velum aliquando ducunt ad nobilis homo.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Nunquam fallere ratione.
        </td>
        <td
                rowspan="1"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Cum habena ire, omnes fortises talem camerarius, pius mineralises.
            Lumens favere! Prarere sensim ducunt ad noster nutrix. Peritus itineris tramitem sensim examinares heuretes
            est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">

        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="9"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Mineraliss sunt nutrixs de superbus poeta.
        </td>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Ubi est domesticus pars?
        </td>
        <td
                rowspan="5"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Galataes messis, tanquam fatalis amor. Lotus, dexter compaters virtualiter amor de flavum, raptus fuga.
        </td>
        <td
                rowspan="9"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            Est clemens hilotae, cesaris.
            CUR LAPSUS TOLERARE?
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Domesticus stella inciviliter locuss pes est. Cum imber ire, omnes fortises vitare secundus, altus
            cedriumes.
            Tolerare aegre ducunt ad grandis mineralis.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Noster solems ducunt ad rumor.
            Bursas sunt competitions de gratis amicitia.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Talis zirbus interdum carpseriss pulchritudine est. Germanus, raptus castors patienter reperire de regius,
            nobilis particula.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Apolloniates, triticum, et nuclear vexatum iacere.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="4"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Nunquam amor xiphias.
        </td>
        <td
                rowspan="4"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Nunquam convertam assimilatio. Est lotus danista, cesaris. Est flavum poeta, cesaris. Orgias sunt galataes
            de lotus genetrix. Regius caesium patienter anhelares secula est. Brevis genetrix callide tractares elogium
            est.
            Sagas sunt caculas de peritus pars. Galataes cadunt in aetheres! Salvus, fidelis habitios superbe desiderium
            de clemens, nobilis canis.
            A falsis, cannabis domesticus gluten.

        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Festus bulla semper resuscitabos cacula est. Sunt medicinaes fallere emeritis, bassus calcariaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Adelphiss credere, tanquam albus messor.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Eheu. Lactas ortum in hafnia! Bi-color, lotus lubas nunquam examinare de flavum, mirabilis consilium.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="11"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam consumere genetrix.
        </td>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Sunt eraes demitto placidus, barbatus cliniases.
        </td>
        <td
                rowspan="5"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Eleates peregrinationes, tanquam raptus sensorem.
        </td>
        <td
                rowspan="11"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            DGUV V 54
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Talis, primus compaters grauiter attrahendam de barbatus, salvus mensa.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cedrium undas, tanquam talis absolutio.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Observare una ducunt ad talis cursus. Sunt indictioes visum teres, ferox habenaes.
            Nutrix
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Secundus, clemens lapsuss inciviliter imitari de placidus, rusticus uria.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="3"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Peritus, fidelis tumultumques tandem quaestio de flavum, talis nuptia.
            Studere grauiter ducunt ad fatalis navis.

        </td>
        <td
                rowspan="3"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Cum turpis peregrinatione, omnes lixaes carpseris flavum, azureus idoleumes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum index peregrinatione, omnes exemplares quaestio rusticus, salvus detriuses.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt caculaes transferre germanus, superbus sectames.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Parma, ignigena, et demolitione.
        </td>
        <td
                rowspan="2"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Sunt itineris tramitemes experientia raptus, teres galataees.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cotta de superbus demissio, transferre candidatus!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cur nuclear vexatum iacere manducare?
        </td>
        <td
                rowspan="1"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Idoleum peregrinationes, tanquam azureus glos.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="13"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam magicae exemplar.
        </td>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Coordinatae salvus imber est.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Clemens impositios ducunt ad castor.
        </td>
        <td
                rowspan="13"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            CUR SENSOREM OBSERVARE?
            GABALIUMS CANTARE!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Bassus devatios ducunt ad homo.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Cum stella mori, omnes urbses perdere neuter, altus ollaes.
            Eleates de placidus sectam, examinare habena!

        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Pars congregabos, tanquam ferox acipenser.
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Mirabilis, fortis hilotaes satis prensionem de dexter, domesticus decor.
            Advenas sunt hilotaes de dexter lamia.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="3"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Elevatus de audax messor, aperto musa!
        </td>
        <td
                rowspan="3"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Competition grandis cursus est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Dexter humani generis tandem consumeres liberi est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum burgus assimilant, omnes habenaes aperto grandis, alter aususes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cur tabes mori?
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Festus fluctus patienter carpseriss lanista est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Nunquam contactus agripeta.
        </td>
        <td
                rowspan="1"
                style="background-color: #f1c02e; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            2
        </td>
        <td style="padding: 4px;">
            Audax, rusticus eras semper tractare de emeritis, alter decor.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Cur poeta peregrinationes?
        </td>
        <td
                rowspan="5"
                style="background-color: #5aa800; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            1
        </td>
        <td style="padding: 4px;">
            Exemplars sunt repressors de emeritis pes. Placidus cedrium absolute vitares orexis est. Sunt exsules
            fallere lotus, neuter mensaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nutrix, eleates, et turpis. Pol, fortis! Cum barcas ortum, omnes medicinaes vitare festus, superbus
            cliniases.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nix audax mensa est. Ecce. Velox, varius lixas cito magicae de pius, alter ventus.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Castus ionicis tormento grauiter quaestios contencio est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Nunquam amor cacula. Pol, a bene castor. Vae, pius domus! Idoleum de fortis clabulare, anhelare lamia! Cum
            lapsus peregrinatione, omnes tataes reperire albus, germanus plasmatores!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="4"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Abactors studere, tanquam fortis fluctui.
        </td>
        <td
                rowspan="4"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Velum etiam ducunt ad nobilis canis.
        </td>
        <td
                rowspan="4"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Est audax cursus, cesaris.
        </td>
        <td
                rowspan="4"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            SENSOREMS PEREGRINATIONE!
            NUNQUAM GRATIA HIBRIDA.
            CUR DEVATIO STUDERE?
            CUR VOX ACCELERARE?
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Orexiss credere!
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum luna trabem, omnes zirbuses reperire clemens, fortis devirginatoes. Teres devatio solite locuss
            absolutio est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Hippotoxota, abnoba, et tata.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="3"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam amor vita.
        </td>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Planetas sunt mineraliss de brevis olla.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Bei allen Unfällen, auch bei dem Verdacht auf Giftgas- oder Dampfinhalation, sofort den Krankentransport zur
            ärztlichen Abteilung veranlassen. Notruf über Messwarte einleiten
        </td>
        <td
                rowspan="3"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            NUNQUAM CONVERTAM AMICITIA.
            CUR DOMINA CANTARE?
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Est raptus danista, cesaris.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Fermium de fortis pes, quaestio lamia! Eheu. Vitas prarere! Raptus ionicis tormento unus contactuss planeta
            est. Spatiis sunt abnobas de flavum barcas.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Animalis gratis apolloniates est.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Cur hippotoxota messis?
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam imitari heuretes.
        </td>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Audax burgus sed mire promissios palus est.
        </td>
        <td
                rowspan="2"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Bei allen Bränden und Explosionen sofort die Feuerwehr alarmieren und ohne eigene Gefährdung Löschversuche
            unternehmen
        </td>
        <td
                rowspan="5"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            CUR NOMEN OBSERVARE?
            CUR DEMOLITIONE OBSERVARE?
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Est albus castor, cesaris.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="1"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Gratis, barbatus detriuss callide convertam de teres, magnum lumen.
        </td>
        <td
                rowspan="1"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Usus faveres, tanquam domesticus luba. Ususs trabem in caelos! Camerarius, audax diatrias inciviliter gratia
            de azureus, barbatus finis.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td
                rowspan="2"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Observare inciviliter ducunt ad peritus cannabis.
        </td>
        <td
                rowspan="2"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Cum ventus cantare, omnes abaculuses acquirere placidus, fatalis fortises. Cacula salvus competition est.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">

        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Detriuss credere! Bursa de barbatus poeta, contactus bubo! Ubi est pius luna? Sensorem, devatio, et nixus.
            Cur historia velum? Fortiss sunt luras de regius liberi. Varius, emeritis bullas acceleratrix imperium de
            bassus, superbus accentor.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">

        </td>
    </tr>
    <tr>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 165px; width: 164px;"
        >
            Nunquam fallere abactus.
        </td>
        <td
                rowspan="5"
                style="padding: 4px; max-width: 200px; width: 200px;"
        >
            Decors observare!
        </td>
        <td
                rowspan="5"
                style="background-color: #f12e49; padding: 4px; text-align: center; vertical-align: middle; width: 35px; min-width: 35px; max-width: 35px;"
        >
            3
        </td>
        <td style="padding: 4px;">
            Abactors sunt menss de neuter victrix.
        </td>
        <td
                rowspan="5"
                style="padding: 4px; width: 100px; min-width: 100px; max-width: 100px;"
        >
            NUNQUAM IMPERIUM VERPA.
            NUNQUAM MAGICAE TORQUIS.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Sunt coordinataees perdere secundus, salvus racanaes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Lubas observare, tanquam fortis cotta.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Cum rumor accelerare, omnes bromiumes carpseris altus, azureus quadraes.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
    <tr>
        <td style="padding: 4px;">
            Azureus, fatalis xiphiass sensim anhelare de camerarius, neuter byssus.
            Ubi est neuter lanista? Cum fraticinida nocere, omnes planetaes examinare dexter, magnum vitaes.
            Cum fuga cadunt, omnes lixaes prensionem superbus, bi-color messores.
        </td>
        <td style="font-size: 20px; text-align: center; vertical-align: middle; padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
            &#10003;
        </td>
        <td style="padding: 4px; width: 30px; min-width: 30px; max-width: 30px;">
        </td>
        <td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
        </td>
    </tr>
</table>
Tontyna commented 4 years ago

Hopefully someone has an idea what I can do about it

You can't do nothing about it. See #36.

WeasyPrint is unable to paginate/split rows which cross the page margin. When it encounters such a row it tries to move it onto the next page. If that isn't possible, it gives up and restricts the cells involved to the current page.

Most of the time these cut-offs pass unnoticed. In your case the background-color disclosed the shortcoming.

Failing row-splitting/cell-elongation manifests itself in two ways:

  1. The overlapping cell height is calculated correctly but the overlapping part of the cell is drawn in the page margins -- that's the green cell in your screenshot.

  2. The height calculation is going down the drain and the cell height collapses to the height of its content -- that's the yellow cell in the screenshot.

And no, break-inside, orphans and widows doesn't help.

Tontyna commented 4 years ago

is there any way to add a bottom-border to the last row of the table on a page and rerender the text inside on the next page again?

What about <tfoot>?