PHP Print preview problems for table

Question

I am generating a php report from Mysql DB. Everything I display in this report is fetched from database.

The problem I face in print preview

If table 3 expands, table4 breaks into two half and sits on next page 2.If I use table-header-group; as Headers for table5, table1 & table 3, its not working in browsers.

Solution I needed

1.If table3 row increases, if table 4 touches the below line(div border),it should completely move to next page in print preview.

2.If table4 goes to next page, it should come below table1 & 2.

Need Help!

Report Sample Image

My Code:

    @media print {
        #container
        {
        border:1px solid;
        }
        table
        {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;

        border-spacing:0;
        border-collapse: collapse; 

        }

        table td 
        {
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 1mm;
        }

        table.heading
        {
        height:50mm;
        }

        #table_table3, #table_table4
        {   
        font-size: 9pt;
    line-height: 7px;font-size: 9pt;
page-break-before: always;
        }
        #table_table3 table , #table_table4 table
        {
        width:100%;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        font-size: 9pt
        border-spacing: 0;
        border-collapse: collapse; 
    page-break-before: always;
        //margin-top:5mm;
        }

        #table_table3 table td , #table_table4 table td
        {
        text-align:center;
        font-size:9pt;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding:1mm 0;
page-break-before: always;
        }
    }

Show us what you've tried. Also: I really don't think tables are the best choice here. The layout, to me at least, seems to beg for divs to be used — Elias Van Ootegem, Dec 30 '14 at 12:15
This is an html/css issue. The fact it's using php or mysql has no relevance. — Novocaine, Dec 30 '14 at 12:18

score 0 · Answer 1 · edited May 23 '17 at 11:56

You need to add some @media print rules to your CSS, so that you get a printer friendly style.

For instance:

Prevent headings from being printed at the bottom of the page

h2, h3 {
   page-break-after: avoid;
}

Prevent list splits or in-image splits

ul, img {
   page-break-inside: avoid;
}

Always page-break before table and articles

table, article {
   page-break-before: always;
}

Page break before specifc table:

table#table-4 {
   page-break-before: always;
}

<table id="table-4">...</table>

In some browsers this works:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Referencing:

How to apply CSS page-break to print a table with lots of rows?

Warning. Severe Browser incompatibilities ahead.

Seems like the majority of browsers do not care about the page-break-* rules..

Looks like, Opera is the only one supporting this..

Spec is http://www.w3.org/TR/CSS2/page.html

I added `@media print {table4 { page-break-before: always; }` ,its not working — vas_bar_code, Dec 30 '14 at 12:36
Please see above. I added the updated code with reference to your suggestions. — vas_bar_code, Dec 30 '14 at 13:13
The majority of browsers do not care about the page-break-* rules.. this seems to work only in Opera. — Jens A. Koch, Dec 30 '14 at 13:43

PHP Print preview problems for table

1 Answers1