I tried to modify an existing app with a complex layout to use this table-based header and footer, but weird things started happening. A DataGrid wasn’t rendered correctly: some column headers had some padding added above.
I changed the width of a column from 65 to 95 and the padding disappeared, but the headers of the first page slipped down to the second page.
I changed it again up to 125 and the headers were finally working, but then I found out that there were huge gaps added in other areas.
So, yeah, browsers today can’t manage header and footer on printed documents, this table little trick helps in simple cases, but don’t keep your hopes too high. 
I had no problems building a few small tests, but dumping a multi-page multi-datagrid multi-column panels multi-etc on it doesn’t allow me to figure out what breaks it. I will update this post and report what is that doesn’t work the next time I use it starting from scratch.