1

Use case : I am using air print to print a html document from iOS device.

Problem : I want to add page breakers for printing the page. I was able to with media print tag, which works well for firefox but not able to make it work for safari (Since inbuilt browser in UIWebView for iOS is safari) . Please help in solving this.

EDIT : Page break is working fine. But the real problem is we cannot group the headers using the tag “table-header-group”. which is necessary to show the table header in each page.

What i have tried?

 <style type="text/css">
@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>

<table border="1" cellpadding="2" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr> ....


        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Actual result, as in safari Actual result, as in safari

Expected result, as in firefox Expected result, as in firefox

Krishna Shanbhag
  • 1,519
  • 13
  • 33

1 Answers1

1

Looks like this is a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=17205

Above might not also work on Google crome.

exPlorer
  • 36
  • 3
  • I'm having a similar issue but it does not manifest in Chrome (Only Safari): http://stackoverflow.com/questions/34132047/media-query-for-print-portrait-view-not-working-in-safari-version-9/#comment-56403263 – R Brill Dec 17 '15 at 09:59