7

<table>次の HTML ドキュメントを考えると、 IE8 で印刷するときと同じページに「テーブル タイトル」行を保持する必要があります。

にもかかわらず、page-break-inside:avoid;タイトルと表の間にまだ改ページがあります。これについての私の理解では、改ページを避けるべきであり、全体divを 2 ページ目に押し込む必要があることを示唆しています。

doctype は XHTML 1.0 Transitional です<meta http-equiv="X-UA-Compatible" content="IE=8" />。IE8 を強制的にこの構文をサポートする標準モードにするように設定し、レンダリングが標準モードで行われていることを確認しdocument.compatMode == "CSS1Compat"ました。XHTML は有効です。

<!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="X-UA-Compatible" content="IE=8" /> 
  <title>Page title</title>
</head>
  <body>
    <h1>Page content</h1>
    this is some content
    <br />which<br />should<br />push<br />the<br />table<br />below<br />on<br />to<br />the<br />next<br />page<br />but<br />the<br />table<br />should<br />be<br />kept<br />together<br />if<br />at<br />all<br />possible<br />please!

    <div style="page-break-inside:avoid;">
      <p><strong>Table title which needs to be kept with the table</strong></p>
      <table>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
      </table>
    </div>
  </body>
</html>
4

3 に答える 3

6

この機能に対する IE8 のサポートにはバグがあります。

Internet Explorer for Windows バージョン 8 は値 avoid をサポートしていますが、場所によっては少しバグがあります。たとえば、ap 要素に適用された場合、ブラウザーは期待どおりに要素内でページを分割しないようにします。ただし、ul 要素に適用された場合、リストが 2 つのページにまたがる可能性があるため、リスト全体は回避するように設定されません。とはいえ、個々のリスト要素は内部で改ページを回避しようとします。

この例から、p の内部でもテーブルの内部でもページを分割しないように試みていると結論付けることができますが、両方を結合することはありません。に非常に長いテキストを入れることでテストできます<p>。

これを修正する方法は、表にタイトルを含めることです。

  <table style="page-break-inside:avoid;" border="1">
    <tr><th colspan="3">Table title which needs to be kept with the table</th></tr>
    <tr><td>one</td><td>two</td><td>three</td></tr>
    <tr><td>one</td><td>two</td><td>three</td></tr>
    [...]
于 2011-06-27T15:52:43.003 に答える
0

Try to use <th> and add title

for example

<table>
    <tr>
        <th>your title</th>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
</table>

CSS use @ media

@media print {
    tr th {
    page-break-inside:avoid;
    }
}

Recently i have created print version HTML it works fine! hope it helps you!

于 2014-09-24T15:22:03.030 に答える