Paging within a table row - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Paging within a table row

Paging within a table row

Options

Previous Topic · Next Topic

Phil

Posted: Tuesday, February 6, 2018 4:26:15 AM

Rank: Advanced Member
Groups: Member

Joined: 11/8/2017
Posts: 66

Hello, I am wanting to page across a row within a table with the header (note thead.table-header-group within the markup) being repeated and text which occurs within the page (note div.page-break-inside:avoid below) appearing on the first page along with the first part of the list. I am getting many page breaks and blank pages when I submit the following to EO-PDF (latest version).

I have tried swapping tables for div's and vice versa but to no avail (I actually have raised a different ticket for the div's query - use div's instead of tables)

Is there something I am doing wrong ?

<div style="padding-left: 210px; border-right: 1px solid #000; page-break-inside: avoid;">
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr>
<td style="border: 1px solid #000; border-right: 0; height: 25px;background-color: #e0e3f2; width: 30px; text-align: center; font-weight: bold; font-size: 10pt;">xxxx</td>
</tr>
<tr>
<td style="border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; text-align: center; font-weight: bold; width: 100%; height: 25px;">yyyy</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;">
<thead style="display: table-header-group">
<tr>
<th style="width: 33%; height: 25px; border-top: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: bold; background-color: #f46d43; ">col1head</th>
<th style="width: 33%; height: 25px; border-top: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: bold; background-color: #fdae61; ">col2head</th>
<th style="width: 33%; height: 25px; border-top: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: bold; background-color: #a9d5ff; ">col3head</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; border-left: 1px solid #000; border-top: 1px solid #000;border-bottom: 1px solid #000;">
<div>aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
<div>eeee</div>
<div>ffff</div>
<div>gggg</div>
</td>
<td style="vertical-align: top; border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000;border-bottom: 1px solid #000;">
<div>mmmm</div>
<div>nnnn</div>
<div>oooo</div>
<div>pppp</div>
</td>
<td style="vertical-align: top; border-top: 1px solid #000; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
</td>
</tr>
</tbody>
</table>
</div>

eo_support

Posted: Tuesday, February 6, 2018 7:11:20 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221

Hi,

We tested your HTML here but we do not see blank pages. So it may have to do with your CSS. However we do see how your HTML can cause issue with paging.

The root of the problem is not the repeating headers --- but of the giant first row. When the paging process pages a table, it follows two rules:

1. Repeat table header if necessary;
2. Try to keep the first row and the table header together. This rule is what caused the strange output for your HTML;

The intention of the second rule is to avoid a lone table header being rendered at the bottom of the first page because there wasn't enough room left to fit the first row. This will result in a lone table header at the bottom of the first page, then another table header at the top of the second page, then the table contents. Obviously the table header at the bottom of the first page is not necessary in this case since it has no data following it. To avoid this case, we have an implied rule to always try to avoid paging between the table header and the first table row.

This would cause problem in your case when the first table row is huge and won't fit in a single page. In that case the whole table will be moved to a new page in an attempt to keep as much together as possible.

To avoid this issue, you can either break the items in your table into multiple rows, or add a small blank row before your main data row. That way the blank row will be kept together with the header but the real data row will be properly paged.

Hope this makes sense to you. Please let us know if you have any more questions.

Thanks!

Phil

Posted: Tuesday, February 6, 2018 9:21:53 AM

Rank: Advanced Member
Groups: Member

Joined: 11/8/2017
Posts: 66

Many thanks for that - your suggestion (small empty row) worked - the blank page I received was because of the page-break-inside:avoid - once I removed it from the div, the blank page no longer appeared

eo_support

Posted: Tuesday, February 6, 2018 1:21:43 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221

Glad to hear that it works for you!

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message