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

orphansを使用して、ページの下部に残す空行の数を指定することができます。要素のレイアウトが設定と競合する場合、要素orphansは次のページに印刷されます。ただし、ブラウザのサポートはかなり粗雑です。あなたの例では、次のように設定しtrます。
tr{orphans:3}

于 2013-03-11T06:41:37.733 に答える
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

Webkit ベースではない一般的なデスクトップ ブラウザー (Firefox や Internet Explorer など) はすべてpage-break-inside: avoid;、<tr>要素の CSS 宣言をサポートするようになりました。これにより、これらのブラウザーでの 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 を使用して列幅が行ごとに変わらないようにする必要があります。別の投稿に対する私の回答は、これを行う 1 つの方法を示していますが、繰り返しテーブル ヘッダーが含まれているため、この場合は必要以上に複雑になります。それでも一見の価値はあるかもしれません。

于 2014-09-10T19:13:57.423 に答える
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 に答える