Specifying keep-together.within-page="always" on a table row (<tr>) in a table ensures that the table row is not split and remains on one page. However, if the table row (<tr>) that was not split is too long to fit on the page, it overflows past the bottom of that page. This is because the value 'always' does not allow splitting of tables on a page. This example shows how to avoid overflows when using 'keep-together'.
In the samples below, in order to demonstrate each 'keep-together' sample as one page, the 'keep-together.within-page' is replaced by a column and 'keep-together.within-column'. Please consider each column as representing a page.
Page shows an example with no 'keep-together'. The table row (<tr>) containing "No.2" is split over two columns. In the next example on page , each table row (<tr>) has 'keep-together' with the value 'always'. The table row (<tr>) containing "No.2" is not split across columns but makes a single area, and the table row (<tr>) overflows past the bottom of the page because it does not fit its target area in the second column.
| No. | Details |
|---|---|
| No.1 |
Item a Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Duis volutpat, quam quis aliquet tristique. |
| No.2 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing. Duis sit amet ipsum non elit tincidunt sagittis ac non tortor. Mauris commodo, elit a imperdiet interdum, nulla velit viverra elit, at scelerisque urna est eget lacus. Integer eu lobortis neque. Donec malesuada sed arcu vitae fringilla. |
| No.3 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| No. | Details |
|---|---|
| No.1 |
Item a Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Duis volutpat, quam quis aliquet tristique. |
| No.2 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing. Duis sit amet ipsum non elit tincidunt sagittis ac non tortor. Mauris commodo, elit a imperdiet interdum, nulla velit viverra elit, at scelerisque urna est eget lacus. Integer eu lobortis neque. Donec malesuada sed arcu vitae fringilla. |
| No.3 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
By specifying 'always' with 'keep-together', as in the example on page , the table row (<tr>) may overflow when making a single area. This overflow can be avoided by using an integer value for 7.20.3 "keep-together" with Antenna House CSS Formatter. As shown on page , overflow is prevented by specifying keep-together.within-column="1" on table rows (<tr>) as shown in the following code:
<tbody>
<tr class="keep-together-1"><td>...</td></tr>
<tr class="keep-together-1"><td>...</td></tr>
...
</tbody>The 'keep-together' value represents its strength; the stronger it is, the more likely that its areas are kept within one page, column, or line. Specifying 'auto' or specifying nothing at all specifies no 'keep-together', whereas specifying 'always' is the strongest value.
Antenna House CSS Formatter supports numeric values for 'keep-together', and when the content generated does not fit within a given area (for example, a page), a break occurs because of the 'keep-together'. However, if the content does not fit on the page of the next chosen area, the content on that page is split regardless of the 'keep-together'. The example on page shows that, if the table row (<tr>) containing "No.2" with keep-together.within-column="1" does not fit in the first column, it is moved to the next column because of the 'keep-together'. When the second table row (<tr>) in the second column doesn't fit entirely within the remaining space, it splits onto the next column and does not overflow.
| No. | Details |
|---|---|
| No.1 |
Item a Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Duis volutpat, quam quis aliquet tristique. |
| No.2 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing. Duis sit amet ipsum non elit tincidunt sagittis ac non tortor. Mauris commodo, elit a imperdiet interdum, nulla velit viverra elit, at scelerisque urna est eget lacus. Integer eu lobortis neque. Donec malesuada sed arcu vitae fringilla. |
| No.3 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
The following code shows several values for 'keep-together':
<tbody class="keep-together-2">
<tr class="keep-together-1"><td>...</td></tr>
<tr class="keep-together-2"><td>...</td></tr>
<tr class="keep-together-3"><td>...</td></tr>
</tbody>When the value "N" is specified for 'keep-together' for an element and the value "M" is specified for 'keep-together' for a child element, if we assume that the second (or later child) does not fit into the same given area of the page as its preceding child, then the following results can occur:
The example on page , as shown in the code above, has keep-together.within-column="2" on the <tbody> and 'keep-together.within-column' values of "1", "2", and "3" for the three <tr> elements containing "No.1", "No.2", and "No.3", respectively.
The second <tr> containing "No.2" does not fit entirely in the first column. The <tbody> has a 'keep-together' value of "2" and the first <tr> has a value of "1" such that the parent's keep strength (N=2) is ≥ the child's keep strength (M=1). The 'keep-together' of the <tbody> applies, the <tr> elements for "No.1" and "No.2" both start in the same column, and the <tr> for "No.2" splits over two columns.
For the third <tr> (containing "No.3"), the parent <tbody> has N=2 and the <tr> has M=3. Here, N < M. The 'keep-together' of the <tbody> does not apply to prevent a break between the second and third rows. The third <tr> starts in the next column. In addition, the content that does not fit in the reformatted area is split over two columns and does not overflow.
| No. | Details |
|---|---|
| No.1 |
Item a Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Duis volutpat, quam quis aliquet tristique. |
| No.2 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing. Duis sit amet ipsum non elit tincidunt sagittis ac non tortor. Mauris commodo, elit a imperdiet interdum, nulla velit viverra elit, at scelerisque urna est eget lacus. Integer eu lobortis neque. Donec malesuada sed arcu vitae fringilla. |
| No.3 |
Item b Details sample Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
A numeric 'keep-together' value can avoid overflow on list items (<li>) as well as on table rows (<tr>). Using it on <li> is shown in the following code.
<ol>
<li class="keep-together-1">
<span>...</span>
<div>...</div>
</li>
<li class="keep-together-1">
<span>...</span>
<div>...</div>
</li>
</ol>Examples of 'keep-together' are: no 'keep-together' specification on page ; keep-together="always" on page ; and numeric 'keep-together' values on page .
keep-together.within-column="always" on list items (<li>).
keep-together.within-column="1" on list items (<li>).