XSL - HTML table footer displaying dynamically in position ( changing as per the number of rows in a table ) - html

Question

I have a XSL sheet embedded with HTML tags, from which I generate a PDF using Java. I'm able to generate the PDF using this XSL stylesheet.
In my XSL i have a model like :
Page 1:
Header
Table
row 1
row 2
row 3
row 4
row 5
Footer
Page 2:
Header
Table
row 6
row 7
row 8
row 9
row 10
Footer
Page 3:
Header
Table
row 11
row 12
row 13
Footer
I should have show table rows 5 per page with Header and Footer. The problem is, I have to show the footer as a static content irrespective of the number of rows in the table.
for example: if the table contains 5 rows or 4 or 3 or 2 or 1, the footer should be at the bottom of the page. Instead, it is displaying dynamically under the table, as the table size changes.
Please find my XSL Stylesheet code below :
<xsl:copy-of select="$Header"/>
<xsl:copy-of select="$OrderRowsHeader"/>
<xsl:for-each select="orders">
<table style=" width: 100%; height: 13mm;">
<tr style="font-size: 10px; border: 0">
<td width="14mm" style="text-align: right; vertical-align: top;"><xsl:value-of select="number" /></td>
<td width="36mm" style=" text-align: left; vertical-align: top;"><xsl:value-of select="code" /></td>
<td width="47mm" style=" text-align: left; vertical-align: top;" ><xsl:value-of select="description" /></td>
<td width="12mm" style=" text-align: left; vertical-align: top;"><xsl:value-of select="units" /></td>
<td width="16mm" style=" text-align: right; vertical-align: top;"><xsl:value-of select="quantity" /></td>
</tr>
</table>
<xsl:if test="(position() mod 5) = 0 and ( position() != last() )">
<xsl:copy-of select="$ReportFooter" />
<div style="page-break-before: always" />
<xsl:copy-of select="$Header"/>
<xsl:copy-of select="$OrderRowsHeader"/>
</xsl:if>
</xsl:for-each>
<xsl:copy-of select="$ReportFooter" />
<xsl:variable name="ReportFooter">
<table style="border: solid thin #c0c0c0; border-collapse: collapse; width: 100%; ">
<tr style="border: solid thin #c0c0c0; border-collapse: collapse;">
<td width="150mm" style="border: solid thin #c0c0c0; border-collapse: collapse; font-size: 8px;">
</td>
Some Text here......
</tr>
</table>
</xsl:variable>
<xsl:variable name="OrderRowsHeader">
<table style="border: solid thin #c0c0c0; border-collapse: collapse; width: 100%;">
<tr style="border: solid thin #c0c0c0; font-size: 9px; border-collapse: collapse;">
<th width="18mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Line</th>
<th width="45mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Product code</th>
<th width="63mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Description</th>
<th width="18mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Units</th>
<th width="16mm" style="border: solid thin #c0c0c0; border-collapse: collapse;">Qty</th>
</tr>
</table>
</xsl:variable>

Answer 1

Sounds like you are running into a styling issue. Your solution is found in CSS. I won't address any of your code besides what is relevant to the footer.
<xsl:variable name="ReportFooter">
<table style="position: absolute; bottom: 0; border: solid thin #c0c0c0; border-collapse: collapse; width: 100%; ">
<tr style="border: solid thin #c0c0c0; border-collapse: collapse;">
<td width="150mm" style="border: solid thin #c0c0c0; border-collapse: collapse; font-size: 8px;">
</td>
Some Text here......
</tr>
</table>
</xsl:variable>
The properties I've added to add to the table are: position: absolute; bottom: 0;
position: absolute will have the table ignore the flow of the page (meaning it does not flow relative to other elements), and bottom is a measurement of how far it is from the bottom of the page, so bottom: 0 will put it at the bottom of the parent container.