Храните содержимое div для печати в IE8 - PullRequest
Новая
       16

Храните содержимое div для печати в IE8

7 голосов
/ 27 июня 2011

Учитывая следующий HTML-документ, мне нужно сохранить строку «Заголовок таблицы» на той же странице, что и <table> при печати в IE8.

Несмотря на page-break-inside:avoid;, все еще существуетразрыв страницы между заголовком и таблицей.Мое понимание этого предполагает, что следует избегать разрыва страницы, и весь div будет перенесен на страницу 2.

Тип документа - 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>

Ответы [ 3 ]

6 голосов
/ 27 июня 2011

Поддержка IE8 для эта функция глючит .

Хотя Internet Explorer для Windows версии 8 поддерживает это значение, избегайте его ошибок в некоторых местах.Например, если применяется к элементу ap, браузер будет стараться не ломать страницу внутри элемента, как ожидалось;но при применении к элементу ul, весь список не должен избегать, поскольку список может занимать две страницы.Тем не менее, отдельный элемент списка будет пытаться избежать разрыва страницы внутри.

Из этого примера мы можем заключить, что он будет пытаться не разбивать страницу ни внутри 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>
    [...]
1 голос
/ 24 сентября 2014

page-break работает только в медийном контексте с подкачкой, например @media print: 

@media print {
  tr {
    page-break-inside:avoid;
  }
}
0 голосов
/ 24 сентября 2014

Попробуйте использовать <th> и добавить заголовок

например 

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

Использование CSS @ media

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

Недавно я создал печатную версию HTML, она отлично работает! надеюсь, это поможет вам!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...