问题描述
我正在使用一个CRM应用程序，该应用程序基于html创建pdf文档。 作为文档的一部分，我需要使用页眉和页脚，无论页面大小如何，该页眉和页脚都将放置在每页的顶部和底部。 除最后一页外，页眉正常，页脚正常。 页脚位于文本的末尾，而不是页面的末尾。
我尝试使用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>
解决方法
不能只将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>