1

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

有人可以帮忙吗？

4

4 回答 4

0

尝试

<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。

于 2013-03-11T05:24:06.083 回答
0

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

于 2013-03-11T06:41:37.733 回答
0

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

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

但是我可以用<tbody>！显然，在现代浏览器中，<table>元素只是用于对各种表格部分进行分组的控制功能，根本不是块元素，<tbody>而是实际的块元素。所以page-break-inside:avoid工作。此外，<tbody>在单个<table>.

这就是秘密：对表格的每个部分使用单独<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>
于 2014-04-07T00:08:11.143 回答
0

所有不基于 webkit 的流行桌面浏览器（即 Firefox 和 Internet Explorer）现在都支持元素page-break-inside: avoid;上的 CSS 声明<tr>，这解决了这些浏览器中的 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 来确保列宽不会因行而异。我对另一篇文章的回答展示了一种方法来做到这一点，但它包括重复的表头，这使得它比在这种情况下需要的复杂得多。不过，仍然可能值得一看。

于 2014-09-10T19:13:57.423 回答