Maintain the grouping of elements within a div when printing in Internet Explorer 8

Question

Maintain the grouping of elements within a div when printing in Internet Explorer 8

When printing in IE8, I'm facing an issue with keeping the "Table title" line on the same page as the <table>.

Despite using page-break-inside:avoid;, there is still a page break between the table title and the actual table. My expectation is for them to be kept together and pushed to the next page if necessary.

The provided HTML document uses XHTML 1.0 Transitional doctype, has

<meta http-equiv="X-UA-Compatible" content="IE=8" />

to force IE8 into Standards Mode, which is supposed to support this syntax (source). Rendering is confirmed to be done in standards mode by checking

document.compatMode == "CSS1Compat"

. The XHTML is valid.

<!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>
        ... (Table contents go here) ...
      </table>
    </div>
  </body>
</html>

css xhtml printing printing-web-page page-break-inside

Answer 1

Answer №1

Support for the page break inside feature in IE8 is not perfect.

Although Internet Explorer version 8 for Windows does support the value avoid, there are some bugs present. For instance, applying it to a p element will prevent page breaks inside the element as expected. However, when applied to a ul element that spans two pages, the entire list is not set to avoid page breaks. Instead, each individual list item will attempt to avoid having a page break inside.

Based on this example, we can infer that while IE8 will try to prevent page breaks inside paragraphs and tables individually, it may not work seamlessly together. You can test this by inserting a long text within your <p>.

To address this issue, you could include your table title within the table itself:

  <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>
    [...]

Answer 2

Support for the page break inside feature in IE8 is not perfect.

Although Internet Explorer version 8 for Windows does support the value avoid, there are some bugs present. For instance, applying it to a p element will prevent page breaks inside the element as expected. However, when applied to a ul element that spans two pages, the entire list is not set to avoid page breaks. Instead, each individual list item will attempt to avoid having a page break inside.

Based on this example, we can infer that while IE8 will try to prevent page breaks inside paragraphs and tables individually, it may not work seamlessly together. You can test this by inserting a long text within your <p>.

To address this issue, you could include your table title within the table itself:

  <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>
    [...]

Answer 3

Answer №2

page-break is specifically designed to function within a paged media context, such as @media print:

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

Answer 4

page-break is specifically designed to function within a paged media context, such as @media print:

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

Answer 5

Answer №3

Consider utilizing the <th> tag along with adding a title.

For instance:

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

To style it, you can use CSS with @media:

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

I recently developed an HTML version optimized for printing and it works perfectly! Hopefully, this example is helpful to you!

Answer 6

Consider utilizing the <th> tag along with adding a title.

For instance:

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

To style it, you can use CSS with @media:

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

I recently developed an HTML version optimized for printing and it works perfectly! Hopefully, this example is helpful to you!

Maintain the grouping of elements within a div when printing in Internet Explorer 8

Answer №1

Answer №2

Answer №3

Similar questions

The xModal window will only pop up once, after which a page refresh is required

Ways to allocate space evenly between components of the same size in React Native

Count the start and end rows of a table within the <tfoot> using pdfHTML/iText 7

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Responsive column display on mobile devices can be optimized by configuring columns to appear in a 2x3 or 1x6 layout. This can be achieved even with

Is it possible to make the info box centered and adjust everything to seamlessly fit on all screen sizes?

apply CSS to highlight a clicked div as if it were a radio button

What could be the reason for the bottom edge of my central diagonal image having a darker border?

Extracting Text from a Span Element Using XPath in Selenium

conceal elements using the <option> class隐藏

Unique approaches: Custom layouts compared to a single adaptive layout for managing various device sizes and orientations

Add space between the first and second rows in the grid gallery display

Place two divs in the middle of another div with equal spacing in between

Tips for modifying jsFiddle code to function properly in a web browser

Is there a way to trigger a function for both a left and middle click at the same time?

Submitting forms with Ajax without reloading the page can cause errors in Internet Explorer

The formatting of the list is not being correctly displayed in the Ajax Jquery list

PHP Email Styling Techniques

Ensure that the table is padded while keeping the cells collapsed

Creating columns of equal height using Bootstrap 3 and flexbox