Configure a Multi-Page Table to Repeat its Header on Every Page

6092 2 9 July 21, 2023

Tags: ,

Introduction

Multi-page tables might not look as clean as you'd like on your first attempt. If a row in your table is split in half between two pages, you can fix this by simply using the CSS attribute "page-break-inside: avoid" in your table, e.g.

<table style="page-break-inside: avoid"> ... *your table contents here* </table>

The above technique, while cleanly distributing the table rows between pages, does not repeat the header of the table on the new page. This is fine for most use cases, but if you'd like a table header to be repeated at the beginning of each page, a bit more configuration is required.

Edit Your Table's CSS

To accomplish this, you'll need to make the following changes to your related list's CSS attributes:

1) Add the following to the end of the CSS attributes in table.table734{ ... }

sd:repeatheader;border-spacing:0; border-width: 0

Example

table.table734 {border:solid black 1px; border-collapse:collapse; border-spacing:0px;font-family:Arial,Helvetica,sans-serif; font-size:10pt; width:100%;}

should become

table.table734 {border:solid black 1px; border-collapse:collapse; border-spacing:0px;font-family:Arial,Helvetica,sans-serif; font-size:10pt; width:100%; sd:repeatheader;border-spacing:0; border-width: 0; }
Note: In all of these steps, it's key that the CSS you add is always added to the end so that it overrides the originally-set border widths.

2) In .table734col0, find the border-width Z and append the following to the end of .table734col0's CSS.
(example included in step 3)

border-width: 0 Zpx Zpx Zpx;

3) In .table734colY (where Y > 0), find its border width Z as specified in its "border" attribute and append the following to the end of .table734colY's CSS:

border-width: 0 Zpx Zpx 0;

For example, if we have pre-existing CSS:

.table734col0{border:solid red 3px;text-align:left;}
.table734col1{border:solid red 3px;text-align:left;}
.table734col2{border:solid red 3px;text-align:left;}

This would become the following after steps (2) & (3):

.table734col0{border:solid red 3px;text-align:left;border-width:0 3px 3px 3px;}
.table734col1{border:solid red 3px;text-align:left;border-width:0 3px 3px 0;}
.table734col2{border:solid red 3px;text-align:left;border-width:0 3px 3px 0;}

4) In .table734header, find its border width Z as specified in its "border" attribute and append the following to the end of .table734header's CSS:

border-width: Zpx Zpx Zpx 0;

For example, if we have:

.table734header{border: solid red 3px;}

We would change it to:

.table734header{border: solid red 3px; border-width: 3px 3px 3px 0;}

Then, find the first th or td cell between the <THEAD></THEAD> tags and add the following:

style="border-width: Zpx Zpx Zpx Zpx;"

So, if we have:

.table734header{border: solid red 3px;}

and

<thead>
<th class="table734header">h1</th>
<th class="table734header">h2</th>
<th class="table734header">h3</th>
</thead>

We would change it to

<thead>
<th style="border-width: 3px 3px 3px 3px;" class="table734header">h1</th>
<th class="table734header">h2</th>
<th class="table734header">h3</th>
</thead>

Troubleshooting

If sd:repeatheader does not repeat the header across pages, please make sure you're on the latest version.

If you're on the latest version and sd:repeatheader does not repeat the header across pages, please make sure that your <th></th> tags are between <thead></thead> tags and the rest of your table rows/columns are between <tbody></tbody> tags. You may need to update the code inserted by the Insert Related List tool.

Tags: ,

Was this helpful?