CSS媒体打印3个空白页

时间:2017-12-14 20:51:12

标签: html css html5 printing

我使用Bootstrap 3,只是为了知道。在第一个之后我无法删除3个空白页。不知道是什么导致了这个问题。

HTML:

    <table class="table table-bordered table-hover text-center" id="post_accesorii">
    <thead>
      <tr>
        <th>Cod</th>
        <th>Denumire</th>
        <th>Cantitate</th>
        <th>U.M.</th>
      </tr>
    </thead>
    <tbody>
    <form method="post" action="" autocomplete="off">
    <?php
    while($rowD = mysqli_fetch_assoc($query)) {   
      foreach ($rowD as $col => $val) {
        if($val != "" && $val != "0" && $col != "nr_fisa" && $col != "id") {
          $findum = mysqli_query($mysqli, "SELECT * FROM `stocuri` WHERE `cod` = '$col' AND `post1` = 'Accesorii'") or die(mysqli_error($mysqli));
          $rowum = mysqli_fetch_array($findum);

          echo "<tr class='piesa_folosita'>";
          if($col == $rowum['cod'])
            {
             echo "<td>" . $col . "</td>";
             echo "<td>" . $rowum['denumire'] . "</td>";
             echo "<td>" . $val . "</td>";
             echo "<td>" . $rowum['um'] . "</td>";
            }
             echo "</tr>";
            } else {
          }
        }
      }
   ?>

   </tbody>
   <tfoot>
   <tr>
   <th>Cod</th>
   <th>Denumire</th>
   <th>Cantitate</th>
   <th>U.M.</th>
   <tr>
   </tfoot>
 </table>

<a href="javascript:window.print()" class="btn btn-primary">PRINT</a>

print.css:

@media print {
  html, body {
    visibility: hidden;
    height: 99% !important;
  }
  #post_accesorii, #post_accesorii * {
    visibility: visible;
    height: 99% !important;

  }
  #post_accesorii+#post_accesorii {
    page-break-before: always;
}
}

在打印预览中,我的表格第一页后面有3个空白页面。我尝试了几种解决方案来删除它们,但都没有。

可能是什么问题?

2 个答案:

答案 0 :(得分:0)

您的height: 99% !important;可能是问题,因为<body/>没有父

答案 1 :(得分:0)

您的上一个打印规则意味着有多个元素具有ID #post_accesorii。情况并非如此,且HTML无效:ID必须仅在页面中显示一次。也许这就是你问题的原因(我不知道你发布的代码是什么,所以我可以说)。

为避免这种情况,请将其设为类而不是ID:.post_accesorii并通过table

将其分配给HTML <table class="post_accesorii">代码