Question

我想打印一个大型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>

有人可以帮忙吗？

Answer 1

尝试

<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循环中的表标记在for循环之前放置。

Answer 2

您可以尝试使用orphans指定页面底部留下的空行数;如果元素的布局与orphans设置冲突，则该元素将打印在下一页上。虽然浏览器支持非常粗制滥造。我会在tr为你的例子设置它，如下所示：
tr{orphans:3}

Answer 3

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

我需要打印一个分为行段的大表。每个段以段标题行开头，后跟大约5个数据行。我不希望任何细分受众群中的分页符，但我做希望列在整个表格中排列。 CSS＆＃34; page-break-inside:avoid＆＃34;属性仅适用于顶级块元素，因此我无法在<div>中使用<table>来控制分页。

但我可以使用<tbody>！显然，在现代浏览器中，<table>元素只是用于对各个表部分进行分组的控件功能，而不是块元素，<tbody>是实际的块元素。所以page-break-inside:avoid就可以了。此外，在一个<tbody>内有多个<table>代码也是合法的。

这就是秘密：对表格的每个部分使用单独的<tbody>，每个部分都包含＆＃34; page-break-inside:avoid＆＃34; CSS属性。

有一些并发症。首先，IE11似乎需要一个＆＃34; orphans:5＆＃34;这个CSS属性可以工作。其次，我尝试将<thead>用于段标题行，为其提供＆＃34; page-break-after: avoid＆＃34;属性，但我遇到了很多跨浏览器问题，所以我最终只是将段标题放在相应的<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>

Answer 4

所有基于webkit的流行桌面浏览器（即Firefox和Internet Explorer）现在都支持page-break-inside: avoid;元素上的CSS声明<tr>，它解决了OP＆＃39 ;那些浏览器中的问题。 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来确保列宽不会因行而异。我的answer to another post演示了一种方法，但它包含重复的表头，这使得它比在这种情况下需要的要复杂得多。不过，还是值得一看。

如何使用断页器打印大型HTML表格？

4 个答案: