There are many times when I have to create reports in Web Pages. These reports typically span multiple printed pages, and each page needs to have a common header. How can this be done easily? CSS comes to the rescue:
<table style="table-layout:fixed">
<colgroup>
<col width="150"/>
<col width="100"/>
<col width="150"/>
<colgroup>
<thead style="display:table-header-group">
<tr>
<td>Header column 1 (150)<td>
<td>Header column 2 (100)<td>
<td>Header column 3 (150)<td>
<tr>
<thead>
<tbody>
<tr>
<td>Body column 1 (150)<td>
<td>Body column 2 (100)<td>
<td>Body column 3 (150)<td>
<tr>
<tbody>
<tfoot style="display:table-footer-group">
<tr>
<td>Footer column 1 (150)<td>
<td>Footer column 2 (100)<td>
<td>Footer column 3 (150)<td>
<tr>
<tfoot>
<table>
Use “table-layout:fixed” to make a statically-sized table (for speed), and use “colgroup” and “col” elements to provide the column sizes. This makes the report render very quickly. (No dynamic table sizing.)
Use “display:table-header-group” in the “thead” element, and “display:table-footer-group” in the “tfoot” element to make the header and footer appear on every page.
Try it!