首页内容溢出时重复页眉和页脚

时间:2017-05-25 06:02:28

标签: html css printing

我知道我的问题可能与我尝试其他解决方案的其他问题重复,但它无法为我工作。在我的情况下,我使用SELECT data1 AS data FROM yourTable UNION ALL SELECT data2 AS data FROM yourTable 作为静态标题进行打印,并使用header作为我的页脚,对于我的内容,我使用表格来显示数据..

所以我现在的问题是当我尝试打印页面时,如果表中的内容溢出,则转到第2页。我想做的是当我的桌子在第一页上溢出时它应该转到第二页,页眉和页脚也会在第二页看到,依此类推......

标题

div

BODY

  <header>  
        <center><h3><b>Miguel Enrique</b></h3>                  
        <p><i>Diplomat<br>Fellow</i><br>Orthopaedic Surgeon</p>         
        </center>
    </header>
<div class="row uniform half collapse-at-2">
  <div class="12u">                                     
    <center><h4><b>---data----</b></h4></center>
    <h4><p>------DATA--------------<br>Tel. 77 19 349 | 65 90 097
    <br>Mon<b>&middot;</b>Wed<b>&middot;</b>Fri  |  3:00pm - 5:00pm
    <br>Tues<b>&middot;</b>Thurs<b>&middot;</b>Sat  |  11:00am - 2:00pm  | 
    <br>  (All by appointment)</p></h5>
  </div>
  <div class="6u">
    <div class="row uniform half">
        <div class="12u">
        <center><h4><b>--DATA---</b></h4></center>                                                      
        <h5><p>  ------DATA-------
        <br>Tel. No. : (632) 789 - 7700 loc. 7330
        <br>Mon-Thurs: 11am - 4pm  |  (by Appointment)</p><h5>
        </div>                              
    </div>
  </div>
<div    

FOOTER

<table class="print">
   <thead>
        <tr>
            <th scope="col"><b>No.</b></th>
            <th scope="col"><b>Prescriptions</b></th>
        </tr>
   </thead>
    <tbody>                                         
        <?php foreach($new_array2 as  $value) { $inc = @$inc + 1;?>
        <tr>
            <td><?php echo $inc; $prescription_array=explode('/',$value);?>
            </td>
            <td><?php foreach($prescription_array as $value2) 
              { echo "<h5>".$value2."</h5>";
            } ?>
            </td>
        </tr>
            <?php }?>
   </tbody>                                                                 
</table>

有什么方法可以解决这个问题吗?打印时,如果内容在第1页上溢出,它将转到第2页,页眉和页脚将显示在第2页上? enter image description here

第一张图片是关于我尝试打印时会发生什么。我想要实现的是在下面的第二张图片。是否可以使用谷歌浏览器?。

1 个答案:

答案 0 :(得分:0)

试试这个:

<header>  
    <center><h3><b>Miguel Enrique</b></h3>                  
    <p><i>Diplomat<br>Fellow</i><br/>Orthopaedic Surgeon</p>         
    </center>
</header>
<div class="row uniform half collapse-at-2">
  <div class="12u">                                     
    <center><h4><b>---data----</b></h4></center>
    <h4><p>------DATA--------------<br/>
        Tel. 77 19 349 | 65 90 097<br/>
        Mon<b>&middot;</b>Wed<b>&middot;</b>Fri  |  3:00pm - 5:00pm<br/>
        Tues<b>&middot;</b>Thurs<b>&middot;</b>Sat  |  11:00am - 2:00pm  |<br/> 
        (All by appointment)</p>
    </h4>
  </div>
  <div class="6u">
    <div class="row uniform half">
        <div class="12u">
            <center><h4><b>--DATA---</b></h4></center>                                                      
            <h5><p>  ------DATA-------<br/>
            Tel. No. : (632) 789 - 7700 loc. 7330<br/>
            Mon-Thurs: 11am - 4pm  |  (by Appointment)</p></h5>
        </div>                              
    </div>
  </div>
</div>

<table class="print">
    <thead>
        <tr>
            <th scope="col"><b>No.</b></th>
            <th scope="col"><b>Prescriptions</b></th>
        </tr>
    </thead>
    <tbody>                                         
        <?php 
        foreach($new_array2 as  $value) 
            { 
                $inc = @$inc + 1;
        ?>
        <tr>
            <td>
                <?php 
                    echo $inc; 
                    $prescription_array=explode('/',$value);
                ?>
            </td>
            <td>
                <?php 
                    foreach($prescription_array as $value2) 
                        { 
                            echo "<h5>".$value2."</h5>";
                        } 
                ?>
            </td>
        </tr>
        <?php 
            }
        ?>
   </tbody>                                                                 
</table>

页脚

<div class="row uniform half collapse-at-2">
    <div class="12u">                       
        <div class="row uniform half">
           <font size="5"><b>Name</b></font><br/>
            License No. : 1<br/>
        </div>
    </div>
</div>