Grid
This example shows a form/report implemented using CSS grid.
Repository files
PDF files
| Converter | Status | PDF Preview |
|---|---|---|
| PDFreactor |
|
|
| PrinceXML |
|
no support for CSS grid
|
| Antennahouse |
|
|
| Weasyprint |
|
|
| PagedJS |
|
rendering error
|
| Typeset.sh |
|
|
| Vivliostyle |
|
|
| BFO |
|
no support for CSS grid
|
OK
.svg){kind=icon}
OK with issues
Error
Unsupported
HTML input
<!DOCTYPE html>
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Neolohn Lohnzettel</title>
<style>
@media screen {
/* Simuliere in der Bildschirmansicht durch Randlinie ein Blatt, aber mit schmäleren Seitenrändern um Platz zu sparen */
.zoomreport {
width: 175mm;
border: 1px solid black;
}
.reportarea {
overflow: auto;
padding-top: 2px;
padding-left: 2px;
}
body {
margin: 0;
}
}
@media print {
@page { /* Seitenränder im Druck, wird von Firefox und Chrome unterstützt, NICHT von Edge. 1.Seite anders (:first) wird nur von Chrome unterstützt! */
margin-top: 5mm;
margin-left: 16mm;
margin-right: 8mm;
margin-bottom: 10mm;
size: A4;
}
.noprint {
display: none;
}
}
@media all {
.zoomreport {
transform-origin: left top;
padding: 2mm;
background-color: white;
}
body, html, p, div, input, select {
font-family: Arial, sans-serif;
font-size: 14px;
user-select: none;
-moz-user-select: None;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*display: inline-block;*/
}
p.reportfont_m {
font-size: 7px;
margin: 0;
padding-top: 1px;
text-align: center;
border-left: black solid 1px;
border-top: black solid 1px;
line-height: 10px;
overflow: auto;
}
p.reportfont_m_border_right {
font-size: 7px;
margin: 0;
padding-top: 1px;
text-align: center;
border-left: black solid 1px;
border-top: black solid 1px;
border-right: black solid 1px;
line-height: 10px;
overflow: auto;
}
p.reportfont_m_border_bottom {
font-size: 7px;
margin: 0;
padding-top: 1px;
text-align: center;
border-left: black solid 1px;
border-top: black solid 1px;
border-bottom: black solid 1px;
line-height: 10px;
overflow: auto;
}
p.reportfont_m_zahlen {
font-size: 7px;
margin: 0;
padding-right: 2px;
text-align: right;
border-left: black solid 1px;
border-top: black solid 1px;
line-height: 10px;
overflow: auto;
}
p.reportfont_m_zahlen_border_right {
font-size: 7px;
margin: 0;
padding-right: 2px;
text-align: right;
border-left: black solid 1px;
border-top: black solid 1px;
border-right: black solid 1px;
line-height: 10px;
overflow: auto;
}
p.reportfont_m_ohne_border {
font-size: 7px;
margin: 0;
padding-top: 3px;
text-align: left;
line-height: 10px;
overflow: auto;
}
p.reportfont_s {
font-size: 6px;
margin: 0;
text-align: left;
line-height: 10px;
}
p.reportfont_l {
font-size: 9px;
font-weight: bold;
margin: 0;
text-align: left;
line-height: 20px;
}
p.reportfont_xl {
font-size: 11px;
font-weight: bold;
margin: 0;
text-align: left;
line-height: 10px;
}
.ueberschriftgrid {
grid-template-columns: 85mm 60mm 30mm;
grid-template-rows: 5mm;
display: grid;
}
.kopfgrid {
grid-template-columns: 12mm 9mm 8mm 16mm 17mm 8mm 3mm 7mm 10mm 11mm 4mm 4mm 4mm 4mm 10mm 7mm 3mm 7mm 3mm 10mm 18mm;
grid-template-rows: 4mm 4mm 4mm 4mm;
display: grid;
}
.briefkopfgrid {
margin-top: 5mm;
grid-template-columns: 25mm 25mm 25mm;
grid-template-rows: 3mm 3mm 12mm 4mm 4.2mm 6mm;
display: grid;
}
.lohnartgrid {
margin-top: 10mm;
grid-template-columns: 4mm 8mm 14mm 3mm 20mm 20mm 4mm 8mm 12mm 5mm 14mm 10mm 10mm 20mm 23mm;
grid-template-rows: 4mm 10mm 4mm 4mm 4mm 4mm 4mm 12mm 4mm 12mm;
display: grid;
}
.verdienstbescheinigunggrid {
grid-template-columns: 28mm 28mm 35mm 61mm 23mm;
grid-template-rows: 4mm 3mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm 4mm;
display: grid;
}
}
</style>
</head>
<body>
<form id="mainform" class="gridcontainer">
<div id="reportarea" class="reportmenu reportarea" style="grid-area:submenusplit / column3 / bottom / column10;">
<div class="zoomreport">
<div class="ueberschriftgrid">
<p class="reportfont_xl" style="grid-area: 1 / 1 / 2 / 2">Abrechnung der Brutto-Netto-Nezüge</p>
<p class="reportfont_xl" style="grid-area: 1 / 3 / 2 / 4">März 2020</p>
</div>
<div class="kopfgrid">
<p class="reportfont_m" style="grid-column: 1 / 2;">Pers.-Nr.</p>
<p class="reportfont_m" style="grid-column: 2 / 4;">Geburtsdatum</p>
<p class="reportfont_m" style="grid-column: 4 / 5;">Eintrittsdatum</p>
<p class="reportfont_m" style="grid-column: 5 / 6;">Austrittsdatum</p>
<p class="reportfont_m" style="grid-column: 6 / 7;">St.Kl.</p>
<p class="reportfont_m" style="grid-column: 7 / 9;">Faktor</p>
<p class="reportfont_m" style="grid-column: 9 / 10;">Ki.Frbtr.</p>
<p class="reportfont_m" style="grid-column: 10 / 11;">St.-Tage</p>
<p class="reportfont_m" style="grid-column: 11 / 15;">Freibetr Jahr</p>
<p class="reportfont_m" style="grid-column: 15 / 17;">Freibetr Monat</p>
<p class="reportfont_m" style="grid-column: 17 / 19;">Pers.Gr.</p>
<p class="reportfont_m" style="grid-column: 19 / 21;">Konfession</p>
<p class="reportfont_m_border_right" style="grid-column: 21 / 22">Gleitzone</p>
<p class="reportfont_m" style="grid-column: 1 / 2;"></p>
<p class="reportfont_m" style="grid-column: 2 / 4;">01.01.1986</p>
<p class="reportfont_m" style="grid-column: 4 / 5;">01.01.2014</p>
<p class="reportfont_m" style="grid-column: 5 / 6;"></p>
<p class="reportfont_m" style="grid-column: 6 / 7;">0</p>
<p class="reportfont_m" style="grid-column: 7 / 9;"></p>
<p class="reportfont_m" style="grid-column: 9 / 10;">0</p>
<p class="reportfont_m" style="grid-column: 10 / 11;">30</p>
<p class="reportfont_m" style="grid-column: 11 / 15;">0,00</p>
<p class="reportfont_m" style="grid-column: 15 / 17;">0,00</p>
<p class="reportfont_m" style="grid-column: 17 / 19;">109</p>
<p class="reportfont_m" style="grid-column: 19 / 21;">--</p>
<p class="reportfont_m_border_right" style="grid-column: 21 / 22">nein</p>
<p class="reportfont_m" style="grid-column: 1 / 3;">Versicherungs-Nr.</p>
<p class="reportfont_m" style="grid-column: 3 / 10;">Krankenkasse</p>
<p class="reportfont_m" style="grid-column: 10 / 11;">KVSatz</p>
<p class="reportfont_m" style="grid-column: 11 / 15;">BGS</p>
<p class="reportfont_m" style="grid-column: 15 / 16;">KVTage</p>
<p class="reportfont_m" style="grid-column: 16 / 18;">RVTage</p>
<p class="reportfont_m" style="grid-column: 18 / 20;">AVTage</p>
<p class="reportfont_m" style="grid-column: 20 / 21;">PVTage</p>
<p class="reportfont_m_border_right" style="grid-column: 21 / 22">PVZuschlag</p>
<p class="reportfont_m_border_bottom" style="grid-column: 1 / 3"></p>
<p class="reportfont_m_border_bottom" style="grid-column: 3 / 8">Knappschaft (allg. Verf. einschl.
Minijobs)</p>
<p class="reportfont_m_border_bottom" style="grid-column: 8 / 10">98000006</p>
<p class="reportfont_m_border_bottom" style="grid-column: 10 / 11">0</p>
<p class="reportfont_m_border_bottom" style="grid-column: 11 / 12">6</p>
<p class="reportfont_m_border_bottom" style="grid-column: 12 / 13">5</p>
<p class="reportfont_m_border_bottom" style="grid-column: 13 / 14">0</p>
<p class="reportfont_m_border_bottom" style="grid-column: 14 / 15">0</p>
<p class="reportfont_m_border_bottom" style="grid-column: 15 / 16">30</p>
<p class="reportfont_m_border_bottom" style="grid-column: 16 / 18">30</p>
<p class="reportfont_m_border_bottom" style="grid-column: 18 / 20">30</p>
<p class="reportfont_m_border_bottom" style="grid-column: 20 / 21">30</p>
<p class="reportfont_m_border_bottom" style="grid-column: 21 / 22; border-right: black solid 1px">nein</p>
</div>
<div class="briefkopfgrid">
<p class="reportfont_s" style="grid-column: 1 / 2;">1) Optimal & Effektiv GmbH</p>
<p class="reportfont_s" style="grid-column: 2 / 3;">Leopoldstr. 55</p>
<p class="reportfont_s" style="grid-column: 3 / 4;">80802 München</p>
<p class="reportfont_s" style="grid-column: 1 / 2; border-bottom: black solid 1px">2) Hotel &
Restaurant</p>
<p class="reportfont_s" style="grid-column: 2 / 3; border-bottom: black solid 1px">Leopoldstr. 110</p>
<p class="reportfont_s" style="grid-column: 3 / 4; border-bottom: black solid 1px">80802 München</p>
<p class="reportfont_l" style="grid-column: 1 / 4;">Herr Anna Aushilfe</p>
<p class="reportfont_l" style="grid-column: 1 / 4;">Leopoldstr. 55</p>
<p class="reportfont_l" style="grid-column: 1 / 4;">Adresszusatz</p>
<p class="reportfont_l" style="grid-column: 1 / 4;">80802 München</p>
</div>
<div class="lohnartgrid">
<p class="reportfont_m" style="grid-column: 1 / 3">Lohnart</p>
<p class="reportfont_m" style="grid-column: 3 / 9">Lohnartbezeichnung</p>
<p class="reportfont_m" style="grid-column: 9 / 11">Menge</p>
<p class="reportfont_m" style="grid-column: 11 / 12">Faktor</p>
<p class="reportfont_m" style="grid-column: 12 / 13">St.pfl</p>
<p class="reportfont_m" style="grid-column: 13 / 14">SV pfl.</p>
<p class="reportfont_m" style="grid-column: 14 / 15">Mindestl.ant.</p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16">Betrag</p>
<p class="reportfont_m_zahlen" style="grid-column: 1 / 3">1<br>10<br>60</p>
<p class="reportfont_m" style="grid-column: 3 / 9; text-align: left">Basisgrundlohn<br>Oberkellner/in SFN
Zuschläge<br>Nachtzuschlag</p>
<p class="reportfont_m_zahlen" style="grid-column: 9 / 11">17,0000<br>1,0000<br>1,0000</p>
<p class="reportfont_m_zahlen" style="grid-column: 11 / 12">13,00<br>24,00<br>16,25</p>
<p class="reportfont_m" style="grid-column: 12 / 13">L<br>F<br>F</p>
<p class="reportfont_m" style="grid-column: 13 / 14">L<br>F<br>F</p>
<p class="reportfont_m_zahlen" style="grid-column: 14 / 15">221,00<br>34,00<br>16,25</p>
<p class="reportfont_m_zahlen_border_right" style="grid-column: 15 / 16">221,00<br>34,00<br>16,25</p>
<p class="reportfont_m" style="grid-column: 1 / 3; border-left: 0 "></p>
<p class="reportfont_m" style="grid-column: 3 / 9; border-left: 0 "></p>
<p class="reportfont_m" style="grid-column: 9 / 11; border-left: 0 "></p>
<p class="reportfont_m" style="grid-column: 11 / 14">Stundenlohn Mindestlohnbrutto</p>
<p class="reportfont_m" style="grid-column: 14 / 15">Mindestl.brutto</p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16">Gesamtbrutto</p>
<p class="reportfont_m_zahlen" style="grid-column: 11 / 14">15,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 14 / 15">255,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-column: 15 / 16">271,25</p>
<p class="reportfont_m" style="grid-column: 11 / 14; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 14 / 15">Arbeitsstunden</p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16">Gesamtstunden</p>
<p class="reportfont_m_border_right" style="grid-column: 1 / 5">Mitteilung</p>
<p class="reportfont_m_zahlen" style="grid-column: 14 / 15">17,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-column: 15 / 16">17,00</p>
<p class="reportfont_m" style="grid-column: 1 / 7; grid-row: 7 / 9"></p>
<p class="reportfont_m" style="grid-column: 7 / 8"></p>
<p class="reportfont_m" style="grid-column: 8 / 10">Lohnsteuerbrutto</p>
<p class="reportfont_m" style="grid-column: 10 / 12">Lohnsteuer</p>
<p class="reportfont_m" style="grid-column: 12 / 14">Kirchensteuer</p>
<p class="reportfont_m" style="grid-column: 14 / 15">SolZ</p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16">Steuerrechtl. Abzüge</p>
<p class="reportfont_m" style="grid-column: 7 / 8"></p>
<p class="reportfont_m_zahlen" style="grid-column: 8 / 10">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 10 / 12">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 12 / 14">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 14 / 15">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-column: 15 / 16">0,00</p>
<p class="reportfont_m" style="grid-column: 1 / 2"></p>
<p class="reportfont_m" style="grid-column: 2 / 4">KV/PV Brutto</p>
<p class="reportfont_m" style="grid-column: 4 / 6">RV/AV Brutto</p>
<p class="reportfont_m" style="grid-column: 6 / 7">KV Beitrag</p>
<p class="reportfont_m" style="grid-column: 7 / 9">KV Zusatz</p>
<p class="reportfont_m" style="grid-column: 9 / 11">PV Beitrag</p>
<p class="reportfont_m" style="grid-column: 11 / 12">PV Zusatz</p>
<p class="reportfont_m" style="grid-column: 12 / 14">RV Beitrag</p>
<p class="reportfont_m" style="grid-column: 14 / 15">AV Beitrag</p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16">SV-rechtl. Abzüge</p>
<p class="reportfont_m_zahlen" style="grid-column: 1 / 2"></p>
<p class="reportfont_m_zahlen" style="grid-column: 2 / 4">221,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 4 / 6">221,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 6 / 7">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 7 / 9">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 9 / 11">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 11 / 12">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 12 / 14">0,00</p>
<p class="reportfont_m_zahlen" style="grid-column: 14 / 15">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-column: 15 / 16">0,00</p>
<p class="reportfont_m" style="grid-column: 1 / 2; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 2 / 4; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 4 / 6; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 6 / 7; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 7 / 9; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 9 / 11; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 11 / 12; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 12 / 14; border-left: 0"></p>
<p class="reportfont_m" style="grid-column: 14 / 15; border-left: 0"></p>
<p class="reportfont_m_border_right" style="grid-column: 15 / 16"></p>
</div>
<div class="verdienstbescheinigunggrid">
<p class="reportfont_m_border_right" style="grid-column: 5 / 6; border-top: 0">Nettoverdienst</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 2 / 5 / 4 / 6">271,25</p>
<p class="reportfont_m_border_right" style="grid-area: 3 / 1 / 4 / 3">Verdienstbescheinigung</p>
<p class="reportfont_m" style="grid-area: 3 / 4 / 4 / 5">Netto Be- und Abzüge</p>
<p class="reportfont_m" style="grid-area: 4 / 1 / 5 / 2">Gesamtbrutto</p>
<p class="reportfont_m_border_right" style="grid-area: 4 / 2 / 5 / 3">Steuerbrutto</p>
<p class="reportfont_m_border_bottom" style="grid-area: 4 / 4 / 18 / 6; border-right: black solid 1px"></p>
<p class="reportfont_m_zahlen" style="grid-area: 5 / 1 / 6 / 2">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 5 / 2 / 6 / 3">0,00</p>
<p class="reportfont_m" style="grid-area: 6 / 1 / 7 / 2">Lohnsteuer</p>
<p class="reportfont_m_border_right" style="grid-area: 6 / 2 / 7 / 3">Kirchensteuer</p>
<p class="reportfont_m_zahlen" style="grid-area: 7 / 1 / 8 / 2">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 7 / 2 / 8 / 3">0,00</p>
<p class="reportfont_m" style="grid-area: 8 / 1 / 9 / 2">SolZ</p>
<p class="reportfont_m" style="grid-area: 8 / 2 / 9 / 3"></p>
<p class="reportfont_m_zahlen" style="grid-area: 9 / 1 / 10 / 2">0,00</p>
<p class="reportfont_m_zahlen" style="grid-area: 9 / 2 / 10 / 3; border-top: 0"></p>
<p class="reportfont_m" style="grid-area: 10 / 1 / 11 / 2">KV / PV Brutto</p>
<p class="reportfont_m_border_right" style="grid-area: 10 / 2 / 11 / 3">RV / AV Brutto</p>
<p class="reportfont_m_zahlen" style="grid-area: 11 / 1 / 12 / 2">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 11 / 2 / 12 / 3">0,00</p>
<p class="reportfont_m" style="grid-area: 12 / 1 / 13 / 2">KV Beitrag</p>
<p class="reportfont_m_border_right" style="grid-area: 12 / 2 / 13 / 3">RV Beitrag</p>
<p class="reportfont_m_zahlen" style="grid-area: 13 / 1 / 14 / 2">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 13 / 2 / 14 / 3">0,00</p>
<p class="reportfont_m" style="grid-area: 14 / 1 / 15 / 2">PV Beitrag</p>
<p class="reportfont_m_border_right" style="grid-area: 14 / 2 / 15 / 3">AV Beitrag</p>
<p class="reportfont_m_zahlen" style="grid-area: 15 / 1 / 16 / 2">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 15 / 2 / 16 / 3">0,00</p>
<p class="reportfont_m" style="grid-area: 16 / 1 / 17 / 2">KV Beitrag Zusatz</p>
<p class="reportfont_m_border_right" style="grid-area: 16 / 2 / 17 / 3">PV Beitrag Zusatz</p>
<p class="reportfont_m_zahlen" style="grid-area: 17 / 1 / 18 / 2; border-bottom: black solid 1px">0,00</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 17 / 2 / 18 / 3; border-bottom: black solid 1px">
0,00</p>
<p class="reportfont_m_ohne_border" style="grid-area: 18 / 1 / 19 / 2">Bank</p>
<p class="reportfont_m_ohne_border" style="grid-area: 18 / 2 / 19 / 3;">Bankname</p>
<p class="reportfont_m_ohne_border" style="grid-area: 18 / 4 / 19 / 5;">Barzahlung/Einzug</p>
<p class="reportfont_m_border_right" style="grid-area: 18 / 5 / 19 / 6; border-top: 0;">Auszahlung</p>
<p class="reportfont_m_ohne_border" style="grid-area: 19 / 1 / 20 / 2">Kontonummer</p>
<p class="reportfont_m_ohne_border" style="grid-area: 19 / 2 / 20 / 3;">BAN Konto</p>
<p class="reportfont_m_zahlen_border_right" style="grid-area: 19 / 5 / 21 / 6; border-bottom: black solid 1px">271,25</p>
<p class="reportfont_m_ohne_border" style="grid-area: 20 / 1 / 21 / 2;">BLZ</p>
<p class="reportfont_m_ohne_border" style="grid-area: 20 / 2 / 21 / 3;">BIC BLZ</p>
<p class="reportfont_m_ohne_border" style="grid-area: 22 / 1 / 24 / 4">A=Abfindung, E=Einmalzahlung,
F=Frei, L=Laufender Bezug, P=Pauschalierung<br> K=Korrektur</p>
<p class="reportfont_m_ohne_border" style="grid-area: 24 / 1 / 25 / 4">1) Unternehmen 2)
Betriebsstätte</p>
</div>
</div>
</div>
</form>
</body></html>