如何使用CSS和PHP根据Paper Size构建表格？

Question

Actually i designed Paper size is A4,

How to move table row automatically to the next page if the row cant fit with the current page using css and PHP

<style>
body{width:100%; height:100%;margin:0;padding:0;font:12pt Tahoma}*{box-sizing:border-box;-moz-box-sizing:border-box}
.page{width:210mm;min-height:297mm;padding:10mm;margin:10mm auto;border:1px #D3D3D3 solid;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.1)}
.subpage{height:257mm;}
@page{size:A4;margin:0}
@media print{html,body{width:210mm;height:297mm}.page{margin:0;border:initial;border-radius:initial;width:initial;min-height:initial;box-shadow:initial;background:initial;page-break-after:always} } </style>

Html code is

<div class="book">
    <div class="page">
        <div class="subpage">
         </div>
    </div>
</div>

Please help to solve my problem. Thank you in advance.

Answer 1

CSS Code

<style>
body
  { 
    width:100%; height:100%;margin:0;padding:0;font:12pt Tahoma
  }
*{
    box-sizing:border-box;-moz-box-sizing:border-box
  }
.page
  {
     width:210mm;min-height:297mm;padding:10mm;margin:10mm auto;
     border:1px #D3D3D3 solid;border-radius:5px;
     box-shadow:0 0 5px rgba(0,0,0,0.1)}
    .subpage{height:257mm;
  }
@page{ size:A4;margin:0 }
@media {  
  print{
        html,body{width:210mm;height:297mm}.page{margin:0;
        border:initial;border-radius:initial;width:initial;
        min-height:initial;
        box-shadow:initial;background:initial;page-break-after:always
       } } 
</style>

Library File

<script src="/lib/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<div class="book" >  </div>

Script Line

<script type="text/javascript">

    function a4_page(name, sub_title, height) {

    var rowCount = $('#myTable tr').length;

    var count = 1;
    var tr_height = 0;
    var html_data = "";
    var page = 1
    var head = $('#myTable tr').eq(0).html();
    while (count < rowCount) {
        if (tr_height == 0) {
            html_data = html_data + '<div class="page"><div class="subpage"><table width="100%" border="0" style="line-height:22px;"><tr><td><strong style="font-size:20px;">' + name + '</strong><br><strong style="font-size:13px;font-weight:100;">' + sub_title + '</strong></td><td>&nbsp;</td><td align="right" style="font-size:13px;"><strong>Print:</strong> <?php echo date("d/m/Y h:i:s A"); ?><br /><strong>Page:</strong> ' + page + '/<span class="total_page"></span><br><?php echo $fdate; ?> - <?php echo $tdate; ?></td></tr></table><hr  style="width:100%; border:2px #000000 solid;" /><table style="table-layout:fixed;word-wrap: break-word; width:715px;border:0px #FFFFFF; font-size:12px; line-height:24px;" rules="all" border="0" >' + head;
        }

        tr_height = tr_height + $('#myTable tr').eq(count).height();

        html_data = html_data + '<tr >' + $('#myTable tr').eq(count).html() + '</tr>';


        if (tr_height > (height || 800)) {
            html_data = html_data + '</table></div></div>';
            tr_height = 0;
            page++;
        }

        count++;
    }

    $(".book").append(html_data);
    $("#myTable").hide();

    $(".total_page").html(page);
}
</script> 

Sample Table

<table style="table-layout:fixed;width:700px;border:0px #FFFFFF; font-size:12px; word-wrap: break-word; " rules="all" border="0" id="myTable" > 
  <tr>
    <td width="100">&nbsp;</td>
    <td width="100">&nbsp;</td>
    <td width="100">&nbsp;</td>
    <td width="400">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Try This ....