如何打破 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;}
            }

Answer 1

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