1

I am trying to make a table printable, specifically never have it break a <td> entry in half, while maintaining proper borders. I am trying this:

    @media print {
        table.print-friendly tr td, table.print-friendly tr th {
            page-break-inside: avoid;
        }
    }

However, this still causes a problem where the table data is missing upper or lower margins. Actually, I am not sure it does anything, because without it, the table misses the last margin on the first page. Easier to explain with an image here:

enter image description here

Plnkr here. Everything relevant is in index.html - I think you need to copy it to notepad and run locally to test printing. Note that the only relevant things in that code are the <style> definitions and the table classes.

To summarize - my goal is to make the table break properly AND maintain margins on print.

VSO
  • 11,546
  • 25
  • 99
  • 187
  • 1
    [Look here](http://stackoverflow.com/a/25737442/2759272) to see how to make a table print correctly in Chrome or any other browser. I haven't looked into Chrome's printing capabilities recently so it's possible there are simpler solutions available, but I doubt it. For page margins, you might want to look into the [@page rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page). In your case, it would probably look something like this: `@page {margin-left: 200px;}` – DoctorDestructo Nov 05 '15 at 17:48
  • Thanks, I will look at your answer there in detail and let you know if it works for me. Upvoted your linked answer. – VSO Nov 05 '15 at 18:02

0 Answers0