html - 给出固定元素和表格元素之间的距离 - 打印模式

我试图制作一份可打印的报告...

我做的报表第二页乱了...

所以我想我应该尝试一个简单的体验..

我做了一个jsFiddle结果同样一团糟。

我有一个固定元素(用于 Logo 、标语等)和一个动态表格。我用<body style="padding-top: 25mm;">给它的距离但只有第一页有效，另一页无效(固定元素和动态表没有距离)。

我试过了@page{ padding: 50mm 0mm 50mm 0mm;}但是padding没用。 margin是工作但是使固定元素被裁剪! (当我使用 style="margin-top:-50mm; 时)

第 1 页:

enter image description here

第 2 页:

enter image description here

如你所见<body style="padding-top: 25mm;">仅适用于第 1 页。

如何在第 2 页上填充？

谢谢

最佳答案

只需在您的第一个表格中添加一个背景色即可解决此问题!

HTML

    <table style="border: none;position: fixed;top: 0;margin-top: 0px; background:#ffffff;z-index:1;">
   <tr>
      <td style="background-color: black;color: white;width: 64px;text-align: center;">
         LOGO
      </td>
      <td>
         abcdefghj
         <br/> bnbkas jbkasb jkbsa jbkjas bkjsbk
         <br/> csfajkfsaj 4812-4124-4124
         <br/> dfsafsfsaf <a href=""> sagasg@asgasgsag.rsaf </a>        
      </td>
   </tr>
</table>
<table style="width: 100%; margin-top:50px; position:absolute; top:50px;">
   <tr>
      <td> no </td>
      <td> nama </td>
   </tr>
   <tr>
      <td> 1 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 2 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 3 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 4 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 5 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 6 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 7 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 8 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 9 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 10 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 11 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 12 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 13 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 14 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 7 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 8 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 9 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 10 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 11 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 12 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 13 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 14 </td>
      <td> nama tes </td>
   </tr>
    <tr>
      <td> 12 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 13 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 14 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 7 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 8 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 9 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 10 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 11 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 12 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 13 </td>
      <td> nama tes </td>
   </tr>
   <tr>
      <td> 14 </td>
      <td> nama tes </td>
   </tr>
</table>

Fiddle Demo

关于html - 给出固定元素和表格元素之间的距离 - 打印模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26376839/

html - 给出固定元素和表格元素之间的距离 - 打印模式

上一篇：javascript - 动画从右下到左上并且不消失

下一篇：php - 如何将每张图片的 ID 放在上面