У меня действительно странная проблема с цветом фона элемента <td>, у которого есть разрыв страницы внутри их строки. Как вы можете видеть на скриншотах, он должен отображать цвет фона на обеих страницах, он просто не делает этого. Иногда он переполняет область нижнего колонтитула, иногда он даже не заполняет весь столбец на первой странице. (Смотрите изображения, чтобы понять, что я имею в виду)
недостаточно цвета фона
цвета переполнения
Также странно, что в некоторых случаях он обрабатывается по-разному (переполнение и не заполнение всего столбца), не зная, в чем разница между этими двумя показанными режимами. Я добавлю файл html -template и css, используемый для генерации таблицы. Для html таблицы спецификаций c, показанной на скриншотах, посетите ту же / аналогичную проблему, которую я разместил здесь на 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;">
✓
</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;">
✓
</td>
{% endif %}
<td style="padding: 4px; width: 86px; min-width: 86px; max-width: 86px;">
{{ "" }}
</td>
</tr>
{% endfor %}
{% endfor %}
</table>