How to break page of Rotated table of HTML

Question

I have rotated table of HTML on my page and on print preview tables are displaying horizontally but data is dynamically fetching in while loop and page is showing limited records overflowed data is not displaying on next page and page is not breaking automatically.

<tr style="font-size:12px;text-align:center">
                                <th class=""><span class="">1</span></th>
                                <th class=""><span class="">2</span></th>
                                <th class=""><span class="">3</span></th>
                                <th class=""><span class="">4</span></th>
                                <th class=""><span class="">5</span></th>
                                <th class=""><span class="">6</span></th>
                                <th class=""><span class="">7</span></th>
                                <th class=""><span class="">8</span></th>
                                <th class=""><span class="">9</span></th>
                                <th class=""><span class="">10</span></th>
                                <th class=""><span class="">11</span></th>
                            </tr>
                            </thead>
                            <tbody>
            <?php  
                dbcon1();
                $sql=mysql_query("select * from medical_temp where medi_pf_number='$pf'");
                while($result=mysql_fetch_array($sql))
                {
                    echo "<tr style='height:15px;border-left:none'><td colspan='11'>".$result['medi_remark']."</td></tr>";
                }
?>

// css rotation code

.pb {
          page-break-before: always;
        }
#abc {
             // -webkit-transform: rotate(90deg);
             // -moz-transform: rotate(90deg);   
             // -ms-transform: rotate(90deg);   /* IE 9 */
             // -o-transform: rotate(90deg);   /* Opera */
             // transform: rotate(90deg);
            height:1500px;
            width:100%;
            padding:500px;
            padding-top:360px;
            padding-left:320px;
            margin-right:-550px;
            margin-top:-10px;
            page-break-inside:avoid;
            }
              #p1 {display: none;}
            }

what problem you have and what you want to do and what is the result of these code currently — Kasnady, Feb 13 '18 at 04:56
click on " enter image description hereI " to see the print preview image. — Learner, Feb 13 '18 at 05:10
can u also show us how it show on actual screen instead of print preview only — Kasnady, Feb 13 '18 at 05:18

score 0 · Answer 1 · answered Jul 12 '22 at 13:27

Instead of rotating the table set a proper @media print {} rule in css in order to print a landscape page.

You can find something here (Landscape printing from HTML)

To print a overflowed table you have to set the proper css breaks.

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

/* put your header in a thead in order to print it every 
   time a new page is created */ 
thead { display:table-header-group }
/* for table footers */ 
tfoot { display:table-footer-group }

source: How to deal with page breaks when printing a large HTML table

How to break page of Rotated table of HTML

1 Answers1