如何在打印时设置 tfoot 页脚的样式，以便最后一次出现页脚是否位于页面底部答案

【问题标题】：How to Style a tfoot footer when printing so the last occurrence if the footer will be at the bottom of the page如何在打印时设置 tfoot 页脚的样式，以便最后一次出现页脚是否位于页面底部
【发布时间】：2020-08-31 03:57:12
【问题描述】：

我正在使用基于 html 创建 pdf 文档的 CRM 应用程序。作为文档的一部分，我需要使用页眉和页脚，无论页面大小如何，它们都将放置在每个页面的顶部和底部。页眉和页脚都可以正常工作，除了最后一页。页脚被放置在文本的末尾，而不是页面的末尾。

我尝试使用 last-child, last-of-type 但它不起作用。即使使用填充和边距也不起作用 - 好吧，它改变了所有的页脚。我怎样才能只到达最后一个。

为了简化测试，我尝试仅更改最后一次出现的页脚的文本颜色。我该怎么做？

这是我的代码：

<div>
<style>
.raz {
 color:green;
}

tfoot.row2 {
color:red;
}

</style>
</div>

<body>
<div style="margin-right: 1.84cm;margin-left: 2cm;width: 21cm; direction:rtl">
<table style="border:none;" class="raz">
    <thead align="left" style="display: table-header-group">
        <tr>
            <th>
            <table style="border-bottom: 1px solid Black; margin-top: 5px; margin-bottom: 20px; width: 100%">
                <tbody>
                

<tr>
                        <td style="vertical-align: middle; font-family: Times New Roman; font-size: 20px;color: Navy">
                        <div style="float: right">abcdefg</div>
                        </td>
                        <td style="width: 50px; vertical-align: middle"><img alt="Logo Image" src="https://xxxxxxxxxxxx/logo.png" style="width: 120px; border: 0px; " /></td>
                    </tr>
                </tbody>
            </table>
            </th>
        </tr>
    </thead>

<tfoot class="row2">

            <tr>
              
                <td>
                <div class="row" style="text-align:center;padding-top:1cm;margin-bottom:1cm;">
                <span style="font-family:tahoma,geneva,sans-serif;font-size:16px;">This is the footer<br />
                This is the second line of the footer</span></div>
                </td>
             
            </tr>

    </tfoot>
<!-- table body -->
<tbody>
    <!--<div style="height:27.5cm;">-->
    <tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
    
</tbody>    
</table>
</div>
</body>

【问题讨论】：

标签： html css footer

【解决方案1】：

您不能仅将 tfoot 用于您想要的。所以你应该改变你的来源，如下所示：

.raz {
    color:green;
}

tfoot.row2 {
    color:red;
}

@media print {
    #spacer {height: 2em;} /* height of footer + a little extra */
    #footer {
        position: fixed;
        bottom: 0;
    }
}

<div style="margin-right: 1.84cm;margin-left: 2cm;width: 21cm; direction:rtl">
    <table style="border:none;" class="raz">
        <thead align="left" style="display: table-header-group">
        <tr>
            <th>
                <table style="border-bottom: 1px solid Black; margin-top: 5px; margin-bottom: 20px; width: 100%">
                    <tbody>


                    <tr>
                        <td style="vertical-align: middle; font-family: Times New Roman; font-size: 20px;color: Navy">
                            <div style="float: right">abcdefg</div>
                        </td>
                        <td style="width: 50px; vertical-align: middle"><img alt="Logo Image" src="https://xxxxxxxxxxxx/logo.png" style="width: 120px; border: 0px; " /></td>
                    </tr>
                    </tbody>
                </table>
            </th>
        </tr>
        </thead>

        <tfoot class="row2">

        <tr valign="bottom">
            <td id="spacer"></td>
        </tr>

        </tfoot>
        <!-- table body -->
        <tbody>
        <!--<div style="height:27.5cm;">-->
        <tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>
        <tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr><tr><td>raz rosman is gever gever</td></tr>

        </tbody>
    </table>

    <div id="footer">
        <span style="font-family:tahoma,geneva,sans-serif;font-size:16px;">This is the footer<br />
                This is the second line of the footer</span></div>
</div>

【讨论】：

嗨，它不工作。我尝试使用与您相同的代码，但我仍然得到结果，在最后一页中，页脚靠近文本而不是页面末尾。有什么建议么？谢谢