Chrome, Edge and maybe more browsers ignore the per display: table-header-group; defined table header, so that the header is not repeated at pages the table spreads.
Attention: Java Script cannot be used. There is more to the site than just this one table. Therefore the header may not be printed on every page. Therefore position: fixed is not a solution.
This is a responsive table. Firefox is printing the header at each page the table spans. Chrome and Edge unfortunately not.
<!--
How to automatically print the headerer of a responsive CSS grid table that is implemented using display: grid on every printed page over which the table extends?
-->
<!DOCTYPE html>
<header>
<title>CSS Display Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media print {
@page {
size: A4 portrait;
margin: 40mm;
}
}
/*
A simple and airy grid table so that it spans several pages of paper despite having few lines.
*/
#tableItems {
display: table;
/* remove bullets and other <ul> Unordered List properties */
list-style-type: none;
border-collapse: collapse;
width: 100%;
margin-top: 12mm;
padding: 0mm;
}
#tableItems .body {
display: table-row;
}
#tableItems .headFull {
display: table-header-group;
}
#tableItems .headReduced {
display: none;
}
#tableItems li {
display: table-cell;
border: thin solid brown;
padding: 2mm;
}
#tableItems .headFull li {
vertical-align: middle;
color: blue;
background-color: cadetblue;
}
#tableItems .posAmountName,
#tableItems .prices {
/* like the row divs are not there */
display: contents;
}
@media screen and (max-width: 600px) {
#tableItems .headFull {
display: none;
}
#tableItems .headReduced {
display: table-header-group;
}
#tableItems .headReduced li {
background-color: aquamarine;
white-space: wrap;
}
#tableItems .posAmountName,
#tableItems .prices {
display: table-cell;
border: thin solid red;
white-space: nowrap;
}
#tableItems .posAmountName li,
#tableItems .prices li {
display: block;
border: none;
line-height: 20%;
}
#tableItems .name {
margin-bottom: 2mm;
}
#tableItems .pos::before {
content: "Pos";
}
#tableItems .pos::after {
content: ":";
}
#tableItems .priceSingle::before {
content: "Single =";
}
#tableItems .priceTotal::before {
content: "Total =";
}
}
</style>
</header>
<body>
<!-- Test table to demonstrate reactiveness -->
<ul id="tableItems">
<!-- Table header for high resolution -->
<div class="headFull">
<div class="posAmountName">
<li class="pos">
Position
</li>
<li class="amount">
Amount
</li>
<li class="name">
Product-Name
</li>
</div>
<li class="description">
Product Description
</li>
<div class="prices">
<li class="priceSingle">
Price per Piece
</li>
<li class="priceTotal">
Price Total
</li>
</div>
</div>
<!-- Table header for low resolution -->
<div class="headReduced">
<li class="posAmountName">
Pos / Amount / Product
</li>
<li class="description">
Description
</li>
<li class="prices">
Price
</li>
</div>
<!-- Table data -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- Table dummy data for testing printing -->
<div class="body">
<div class="posAmountName">
<li class="pos">001</li>
<li class="amount">3 Pieces</li>
<li class="name">DIGISOL</li>
</div>
<li class="description">
Solar heater controller with digital display.
</li>
<div class="prices">
<li class="priceSingle">443,53 €</li>
<li class="priceTotal">1.330,59 €</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
002
</li>
<li class="amount">
8 Pieces
</li>
<li class="name">
NIVA
</li>
</div>
<li class="description">
Liquid level controller for skimmer pools.
</li>
<div class="prices">
<li class="priceSingle">
415,34 €
</li>
<li class="priceTotal">
3.322,72 €
</li>
</div>
</div>
<div class="body">
<div class="posAmountName">
<li class="pos">
003
</li>
<li class="amount">
3 Pieces
</li>
<li class="name">
ALLPOOL
</li>
</div>
<li class="description">
Multifunctional pool controller.
</li>
<div class="prices">
<li class="priceSingle">
2.276,08 €
</li>
<li class="priceTotal">
6.828,24 €
</li>
</div>
</div>
<!-- There is more than a table at this page -->
<p>
T<br>e<br>x<br>t<br>.<br>T<br>e<br>x<br>t<br>.<br>T<br>e<br>x<br>t<br>.<br>T<br>e<br>x<br>t<br>.<br>T<br>e<br>x<br>t<br>.<br>T<br>e<br>x<br>t<br>.
</p>
</body>
</html>
Elements with display: table-header-group or display: table-footer-group will only be repeated across printed pages if they have some variants of break-inside: avoid specified. This is called for by the css tables spec.
<thead> and <tfoot> elements have this property added by Chrome's UA stylesheet, so if you use those elements you don't have to specify any break-inside.