如何用分页符打印一个大的HTML表 - How to print a large HTML table with page breakers?

我想打印一个大的HTML表，而不打破它的行在每页结束。我使用以下代码，但它不工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
<body>
<table border="1">
 <?php
 for($i=0;$i<50;$i++){
 ?>

  <tr>
        <td height="50" width="130">gukgu</td>
        <td height="50" width="180" height="50" width="145">gukgu</td>
        <td height="50" width="130">gukgu</td>
        <td height="50" width="180" height="50" width="145">gukgu</td>
 </tr>
  <?php
  }
   ?>
</table>   
</body>
</html>

有人能帮忙吗?

您可以尝试使用orphans来指定要留在页面底部的空行数;如果一个元素的布局与orphans设置冲突，该元素将被打印到下一页。不过浏览器的支持相当差劲。对于您的示例，我会将其设置为tr，如下所示:
tr{orphans:3}

Try

<table border="1">
    <?php for($i=0;$i<50;$i++) { ?>
    <tr>
        <td height="50" width="130">gukgu</td>
        <td height="50" width="180" height="50" width="145">gukgu</td>
        <td height="50" width="130">gukgu</td>
        <td height="50" width="180" height="50" width="145">gukgu</td>
    </tr>
    <?php } ?>
</table>

在for循环中有table标签，放在for循环之前

我迟到了，但我有一个类似的问题，这是我能找到的最接近的讨论。我已经解决了我自己的问题，想和下一个人分享。

我需要打印一个被分成行段的大表。每个段以一个段头行开始，然后是大约5个数据行。我不希望在任何段中有分页符，但是我确实希望列在整个表中对齐。CSS的"page-break-inside:avoid"属性只适用于顶级块元素，所以我不能在<table>中使用<div>来控制分页。

但是我可以使用<tbody> !显然，在现代浏览器中，<table>元素只是一个用于分组各个表部分的控制特性，根本不是块元素，而<tbody>是实际的块元素。所以page-break-inside:avoid可以解决这个问题。此外，在单个<table>中使用多个<tbody>标签是合法的。

所以这就是秘密:使用使用单独的<tbody>表的每一部分，每个与" page-break-inside:avoid " CSS属性。

有一些并发症。首先，IE11似乎需要一个"orphans:5"CSS属性来工作。其次，我尝试使用<thead>的段头行，给它一个"page-break-after: avoid"属性，但我遇到了很多跨浏览器的问题，所以我最终只是把段头内相应的<tbody>标签。

CSS:

    tbody.segment {
        page-break-inside: avoid;
        orphans: 5;
    }
    th.segment {
        border: thin solid black;
    }

HTML:

    <table>
        <tbody class="segment">
            <tr><th class="segment" colspan="3">Segment 1</th></tr>
            <tr><td>data1aa</td><td>data1ab</td><td>data1ac</td><tr>
            ...
            <tr><td>data1za</td><td>data1zb</td><td>data1zc</td><tr>
        </tbody>
        <tbody class="segment">
            <tr><th class="segment" colspan="3">Segment 2</th></tr>
            <tr><td>data2aa</td><td>data2ab</td><td>data2ac</td><tr>
            ...
            <tr><td>data2za</td><td>data2zb</td><td>data2zc</td><tr>
        </tbody>
    </table>

所有不基于webkit的流行桌面浏览器(即Firefox和Internet Explorer)现在都支持<tr>元素上的CSS声明page-break-inside: avoid;，这解决了这些浏览器中OP的问题。Webkit的支持显然仅限于块元素，所以这个问题在技术上还没有解决Chrome, Safari和Opera(我很确定这里发布的其他解决方案都不会有帮助)。但是，可以通过将表转换为一堆不可破坏的块来模拟所需的行为。如果使用固定的列宽，则可以使用纯CSS完成，如下所示:

<style>
  table {border-collapse: collapse;}
  table > tbody > tr {
    display: block;
    page-break-inside: avoid;
  }
  table > tbody > tr > td {
    border: 2px solid black;
    width: 100px;
    max-width: 100px;
  }
  table > tbody > tr:first-child ~ tr > td {border-top: none;}
</style>
<table>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>Multiple<br/>lines of<br/>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>Multiple<br/>lines of<br/>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>Multiple<br/>lines of<br/>data</td>
  </tr>
</table>

如果你不想使用固定的列宽度，那么你必须使用javascript来确保列宽度不会从一行到另一行变化。我对另一篇文章的回答演示了一种方法来做到这一点，但它包括重复表头，这使得它比在这种情况下需要的复杂得多。不过还是值得一看