XSL - HTML表格页脚动态显示位置(根据表格中的行数更改)

时间:2018-05-22 14:07:28

标签: html xslt xslt-1.0

我有一个嵌入了HTML标签的XSL表,我使用Java生成PDF。我可以使用这个XSL样式表生成PDF。 在我的XSL中,我有一个类似的模型:

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

我应该在每页显示表格行5,页眉和页脚。问题是,我必须将页脚显示为静态内容,而不管表中的行数。

例如:如果表包含5行或4或3或2或1,则页脚应位于页面底部。相反,随着表格大小的变化,它会在表格下动态显示。

请在下面找到我的XSL样式表代码:

<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>

1 个答案:

答案 0 :(得分:1)

听起来你遇到了样式问题。您的解决方案可以在CSS中找到。除了与页脚相关的内容之外,我不会解决任何代码。

<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>

我添加到表中的属性是:position: absolute; bottom: 0;

position: absolute会让表忽略页面的流程(意味着它不会相对于其他元素流动),而bottom则衡量它与页面底部的距离,因此bottom: 0会将其放在父容器的底部。