Question

我想在打印时删除border和tfoot区域内的thead。当表格的行被分成新页面时，即使在tfoot以及thead区域内，边框也会继续显示。这是问题的屏幕截图：

我的代码：

@media print {
  .report-container {
    page-break-after: always;
  }
  thead.report-header {
    display: table-header-group;
  }
  tfoot.report-footer {
    display: table-footer-group;
    border: none;
  }
  #spacer {
    height: 230px;
  }
  #footer {
    position: fixed;
    bottom: 0;
    border: none;
  }
}

<table class="report-container" width="100%" style="" cellspacing="1" cellpadding="5">
  <thead class="report-header">
    <tr>
      <td width="" align="left">
        <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
      </td>
    </tr>
  </thead>
  <tfoot class="report-footer">
    <tr>
      <td width="" align="left" id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        <?php
          //include 'table_content.php';
        ?>
        <table border=1 style="border-collapse: collapse;">
        <?php
        for($i=0; $i<=100;$i++) {
	        echo '<tr><td>';
	        echo "Column " . $i . '</td><td> Column2 ';
	        echo '</td></tr>';
        }
        ?>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<div id="footer">
  <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
</div>

Answer 1

如下所示从CSS样式表的position: fixed; bottom: 0;中删除了#footer，并为页脚应用了高度值。

@media print {
  .report-container {
    page-break-after: always;
  }
  thead.report-header {
    display: table-header-group;
    background-color:red;
  }
  tfoot.report-footer {
    display: table-footer-group;
    border: none;
    background-color:green;
  }
  tbody {
    background-color:blue;
  }
  #spacer {
    margin-bottom: 150px;
  }
  #footer {
    border: none;
  }
} 




<table class="report-container" width="100%" style="" cellspacing="1" cellpadding="5">
  <thead class="report-header">
    <tr>
      <th width="" align="left">
        <?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
      </th>
    </tr>
  </thead>
  <tfoot class="report-footer" id="spacer">
    <tr>
      <td><?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><?php
          include 'table_content.php';
        ?>
      </td>
    </tr>
  </tbody>
</table>

这将为您工作。尝试一下。让我知道是否有任何问题。

Answer 2

我无法真正重现您的结果...请您发布一些生成的html来显示问题（我的意思是，实际上包含表数据而不是-stuff）。

但是，如果我正确，则您正在尝试为所使用纸张上已经包含的公司页眉和页脚保留标记的空间。在这种情况下，我为您提供解决方法

添加白色（意思是：background: white;）将固定尺寸的div划分为所需大小，并在包含附加标题数据的html页面的顶部和底部添加较高的z-index *
在html页面内容前后添加具有相对位置和页眉/页脚大小的空白div，因此整个内容不会“进入”其他页眉/页脚元素（我认为使用填充）应该也可以，但是在这里没有）
将thead和tfooter留空-对其进行大小调整，以使其不会“进入”其他页眉/页脚元素

测试一下。

*）注意：显然（至少在Opera 54.0上）白色背景颜色永远不会被忽略，但是如果打印时页眉/页脚似乎是透明的而不是白色，请寻找“打印背景图像”的选项< / p>

删除tfoot和thead内部的表格边框

2 个答案: