Question

我想用“ position：sticky”固定页眉和页脚。

它在“一个”行上运行良好，问题是我的标头确实有多于1行以使其固定，而我得到的输出是两行“溢出” 。< / p>

*对不起，我用英语不好解释

我尝试给行添加填充或尝试在两行之间保持一定距离，但似乎不起作用

我的页脚代码

<tfoot>
    <tr>

<th class="text-right"></th>
<th class="text-left"><p class="font-weight-light"><?php echo "Total"; ?></p></th>
<th  class="text-right"><p class="font-weight-light"><?php echo $total_pengajuan; ?></p></th>
<th  class="text-right"><p class="font-weight-light"><?php echo $total_pencairan; ?></p></th>
<th  class="text-right"><p class="font-weight-light"><?php echo $total_plafond; ?></p></th>
<th  class="text-right"><p class="font-weight-light"><?php echo $total_target/1000; ?></p></th>
<th  class="text-right"><p class="font-weight-light"><?php echo $total_persentase; ?>%</p></th>
<th class="text-right"></th>

</tr>

<tr>

<td colspan="8">
<a href="#"><i class="fa fa-download"></i> Export</a>
<p style="color:red">*Plafond dan target dalam ribuan</p>
</td>

</tr>

</tfoot>

固定位置的CSS（表格的类为“＃table-fixed”）：


.table-fixed tfoot th{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding-top:10px;
  background: white;
  color: black;
  z-index:4;

}

这是页脚的第一个条件： https://imgur.com/JjRjF3c.png

这是页脚的滚动状态（我的意思是，两行都固定，但是TD溢出TH）； https://imgur.com/uGiu2je.png

如何使页眉和页脚固定位置（页眉和页脚都有多行）

0 个答案: