html - Weasyprint - 分页符上的 - 元素的背景颜色

Question

<td>对于在行跨度内有分页符的元素的背景颜色，我遇到了一个非常奇怪的问题。正如您在屏幕截图中看到的那样，它应该在两个页面上呈现背景颜色，它只是不这样做。有时它溢出到页脚区域，有时它甚至没有填满第一页上的整个列。（查看图片以了解我的意思）

背景颜色不够

溢出的颜色

同样奇怪的是，在某些情况下，它的处理方式似乎有所不同（溢出且未填满整列），不确定这两种显示行为之间的区别是什么。我将添加用于生成表格的 html 模板文件和 css。对于屏幕截图中显示的特定表格的 html，请访问我在Github Weasyprint上发布的相同/类似问题，因为字符限制没有让我在这里，因为它太大了......

文本也发生了类似的问题，它也像颜色一样溢出： 溢出的文本

希望有人知道我能做些什么，我现在真的被困住了。

还有一个问题：有没有办法在页面上的表格的最后一行添加底部边框并再次在下一页上重新呈现里面的文本？

在有人提到-属性之前page-break-inside: avoid，我对此很熟悉，问题是它对我没有帮助，因为此表中的某些部分比一页大得多（也许没有这些数据，但它是可能的并且确实发生）所以我不能将这些部分放在一起并在之后打破。

感谢每一个可以帮助我的评论！

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;
            }

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

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

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

            .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])

表模板文件：

{% 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>

标签： htmlcssbackground-colorweasyprint