I want to generate a credit note for the commissions of our sales reps with weasyprint and Django.
For the beginning i want to print all the invoiced items in one table and under this a summary-table. In the next step i will create the layout of the credit note.
html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/test_style.css' %}">
<title>Title</title>
</head>
<body>
<table class="invoice_items">
<tr>
<th>Belegart</th>
<th>Datum</th>
<th>Beleg-Nr</th>
<th>Kunde</th>
<th>Artikel</th>
<th>Menge</th>
<th>Verkaufspreis</th>
<th>Rechnungsbetrag</th>
</tr>
{% for item in items %}
<tr>
<td>{{ forloop.counter }} - {{ item.document.document_type }}</td>
<td>{{ item.document.invoice_date }}</td>
<td>{{ item.document.invoice_number }}</td>
<td class="table_cell_left">{{ item.document.customer.name }}</td>
<td class="table_cell_left">{{ item.description }}</td>
<td>{{ item.quantity }}</td>
<td class="table_cell_right">{{ item.item_price }} €</td>
<td class="table_cell_right">{{ item.total_cost }} €</td>
</tr>
{% if item.comment %}
<tr>
<td class="table_cell_left" colspan="8"><b>Anmerkung:</b> {{ item.comment }}</td>
</tr>
{% endif %}
{% endfor %}
</table>
<div class="summary">
<table>
<tr>
<th class="table_cell_right">Summe Verkäufe/Gutschriften</th>
<td class="table_cell_right">{{ total_sales|floatformat:"2g" }} €</td>
</tr>
{% for key, value in summary.commission_rates.items %}
<tr>
<th class="table_cell_right">Provision {{ key }} %</th>
<td class="table_cell_right">{{ value|floatformat:"2g" }} €</td>
</tr>
{% endfor %}
{% if 'special_items' in summary %}
{% for key, value in summary.special_items.items %}
<tr>
<th class="table_cell_right">{{ key }}</th>
<td class="table_cell_right">{{ value|floatformat:"2g" }} €</td>
</tr>
{% endfor %}
{% endif %}
<tr>
<th class="table_cell_right">Summe Provision ohne MwSt.</th>
<td class="table_cell_right">{{ commission_total|floatformat:"2g" }} €</td>
</tr>
<tr>
<th class="table_cell_right">Summe</th>
<td class="table_cell_right">{{ commission_total|floatformat:"2g" }}</td>
</tr>
</table>
</div>
</body>
</html>
css
@page {
size: A4;
margin: 5mm 5mm 5mm 15mm;
}
table, th, td {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
font-size: 10px;
padding: 3px 5px 2px 5px;
break-inside: auto;
}
body {
font-family: "Lato", sans-serif;
}
.items {
float: right;
margin-top: 10mm;
}
.table_cell_left{
text-align: left;
}
.table_cell_right{
text-align: right;
}
.summary {
page-break-before: auto;
margin-top: 5mm;
}
This works...means it prints everything and, because there is not enough room for the complete summary-table, it makes a page break before it. The only "problem"... The summary-table is on the left side of the page ;-). If i add a float: right: to my .summary css it doesen't makes a page-break and prints the first line of the summary-table direct under the items table and ends the document. The "rest" of my summary-table is cut off.
So..what i expecting... If there is not enough room under the invoice_items-table there should be a page break and THEN the summary-table on the right side.