How to get DIV Table headers and footers to repeat when the Div Table is broken by a page-break when printing

Question

I'm trying to replace a normal html table using DIVs. However, it isn't behaving as I'd expect when the table is split with a page-break when printed or rendered to a PDF. I'd assume that it would behave like a normal table, whereby the table-header repeats at the top of the page, and the table-footer at the bottom.

[Header row]

[Table rows]

---Page break---

[Header row]

[Table rows]

[Footer row]

.Table {
  display: table;
  width: 100%;
}

.TableRow {
  display: table-row;
}

.TableHeading {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}

.TableCell,
.TableHead {
  display: table-cell;
  padding: 3px 10px;
  border: 1px solid #999999;
}

.TableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}

.TableBody {
  display: table-row-group;
}

pandektis · Accepted Answer

Copied your code snippets, and I found out that work as expected (repeating, that is) on Firefox & Edge, but not Chrome & Opera. So I thought it was some kind of specific browser bug, and after some search I found this:

break-inside:avoid;

Add this CSS to .TableHeading and .TableFoot - tested it and works. But it breaks somewhat the footer's vertical alignment

The solution was found here, with history and explanation.

Hope that helps

How to get DIV Table headers and footers to repeat when the Div Table is broken by a page-break when printing

Answers (1)

Related Questions