SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Print Header and Footer on each printed page

    I am trying to get the thead and tfoot to appear on the top and bottom of each page when I print. The problem is that if the tbody content is not the correct height then the tfoot could be only half way down the page instead of at the bottom.

    This is the jsfiddle of the code as far as i have it http://jsfiddle.net/zfw5F/

    HTML Code:
    <div class="wrapper">
    
        <div class="print_options">
            <a href="#" onclick="self.close()"><i class="icon-remove"></i> Close</a>
            |
            <a href="{$base_url}residential-lettings/suppliers/generate-letter-pdf/supplier/{$supplier.id}/letter/{$letter.id}"><i class="icon-copy"></i> PDF</a>
            |
            <a href="#" onclick="window.print()"><i class="icon-print"></i> Print</a>  
        </div> <!-- print_options -->
    
        <table class="print_page">
            <thead>
                <tr>
                    <td>
                        <div class="print_header">
                            <div class="print_header_logo">
                                <h1 class="showhouse-text">Laagro</h1>
                            </div>
                            <div class="print_header_address">
                                <p>
                                    New Somewhere House <br>
                                    123 Somewhere Avenue <br>
                                    Newry <br>
                                    Down <br>
                                    BT35 ABC <br>
                                    UK
                                </p>
                            </div>
                        </div>
                    </td>
                </tr>
            </thead> <!-- thead -->
    
            <tbody>
                <tr>
                    <td>
                        Dear John, <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, laboriosam, ut, reiciendis quidem explicabo ipsum accusantium molestias nihil sint cumque eos repellendus rem excepturi rerum hic dolorum at iusto vel numquam accusamus nemo aut facilis blanditiis quasi quaerat nobis quisquam nisi inventore ex. Iusto, a, molestiae aliquam hic labore officia quae non ipsam libero obcaecati explicabo totam pariatur doloribus quasi mollitia! Reiciendis, excepturi, alias, quisquam commodi ducimus mollitia in iste harum facere consequatur animi doloribus accusantium quia blanditiis maiores voluptatibus architecto ex laborum modi eaque. Veritatis, explicabo deserunt consequatur cum quibusdam repudiandae rerum consequuntur at quia aut. Vero, architecto, porro, quis, molestias consequuntur possimus ipsa sint expedita asperiores quibusdam eius maiores explicabo quia hic molestiae magni deserunt fugit numquam provident fugiat. Accusamus, excepturi totam eveniet neque delectus hic quasi! Obcaecati, pariatur, dolor, voluptates recusandae cum ipsa sapiente id corporis quam totam laboriosam quia et omnis. Exercitationem excepturi corrupti repellat quis omnis. Illo, labore, quae rerum dicta atque ex maxime at incidunt aliquam libero ea delectus beatae ab veniam repellat amet architecto sunt dignissimos. Officiis, architecto, voluptatum, mollitia, iusto odit eaque error autem est quaerat quo deserunt sequi vel totam enim nostrum sunt fuga sint laudantium ab assumenda ex nobis earum. Ea explicabo dolorum quidem nostrum dicta architecto rerum. Suscipit, libero, delectus culpa unde officiis itaque magnam exercitationem eius aliquid tempora! Hic, officia, perspiciatis fugiat adipisci veniam consequuntur quasi expedita quae dolores assumenda officiis quo ex voluptas iure nobis dolorum aliquam dignissimos magni nesciunt quia ipsa debitis molestias nulla. Doloremque, assumenda, quae nulla magni atque dolorem sequi adipisci illum dolores. Aperiam, blanditiis sit asperiores excepturi vel deserunt vitae exercitationem fugiat quos nobis dolore laudantium beatae animi officiis praesentium obcaecati odio fuga quasi voluptate eius fugit tenetur incidunt quas rem tempora quidem placeat doloribus harum necessitatibus repellat at consequuntur alias aut. Quidem, ut itaque quod. Natus, magnam, deleniti dolores necessitatibus omnis dolore aut dolorem doloremque autem libero cupiditate explicabo voluptas delectus laboriosam ad sint voluptate ea quae fugit repellendus? Sunt, doloribus eum autem soluta vero fugiat obcaecati dolore repellendus placeat laudantium? Velit, quis, dicta ipsam accusamus repudiandae aliquid tempore sed tenetur ipsum modi consequatur architecto doloribus unde? Numquam, quasi laudantium atque tenetur ab voluptatibus ipsa velit magnam aliquam. A, non officia velit aliquid fugiat odit error commodi. Aliquam, laudantium placeat sequi incidunt sit consectetur vitae rerum! Iste, id, quos aspernatur assumenda optio odio accusamus quas tenetur fugiat aliquid tempora facilis eos asperiores sint nisi ipsum molestiae quis? Impedit, eos, eius ad iusto natus accusantium quam nobis. Maxime, distinctio est nulla ab delectus sequi voluptatum. Amet, iure aliquam cupiditate deserunt consectetur quod iusto sed mollitia! Velit, labore, provident, saepe, soluta ducimus deserunt officiis consectetur dignissimos maiores quas alias deleniti eaque iure nostrum non excepturi quos nobis veritatis corporis qui cupiditate quo tenetur molestias ab odio itaque quidem mollitia porro dolores eius dicta ipsum vero culpa sequi incidunt voluptas accusamus commodi beatae iste laudantium reprehenderit dolorem vitae voluptates hic et ratione? Qui, culpa, fugiat voluptas blanditiis optio minus tempore aperiam nulla cum pariatur autem saepe maiores enim. Aspernatur, totam modi deleniti voluptatem eum est harum architecto dolores. Nisi, autem, culpa magni corporis vitae odio non impedit doloribus soluta blanditiis fuga fugiat itaque atque laboriosam voluptate officia omnis. Veritatis, consequuntur maiores id soluta recusandae tempore unde odio accusamus tenetur iusto rem perferendis ullam ad sunt excepturi ratione perspiciatis inventore itaque harum amet! Nihil, ut, modi, autem alias aliquid porro sunt iure perferendis ad nemo a mollitia quae debitis ex doloribus hic fuga nesciunt culpa unde error cumque id labore ea nisi adipisci atque explicabo! Consectetur, aliquid, fugit, obcaecati, voluptatibus nisi aperiam quo itaque molestiae modi nobis eligendi vel totam eveniet consequuntur ab corporis expedita reiciendis quasi rem quia ullam non ea accusantium ratione porro nesciunt eius dolor tenetur officia praesentium harum sed a tempore magni odio suscipit soluta. Beatae, vero, cumque, voluptas, mollitia libero ad eveniet optio velit tenetur est asperiores natus commodi maiores modi odio maxime laborum doloribus quasi. Doloribus, laudantium, eius saepe perspiciatis voluptas fugiat ipsam deleniti repellendus harum doloremque ullam ducimus asperiores quas est reiciendis ut quaerat earum laborum delectus voluptates exercitationem nisi illum enim mollitia iste assumenda quod vel ad aut at totam iure expedita quia! Officia, architecto, vel, laborum, accusantium assumenda quae odio molestiae aut molestias maxime harum voluptatem recusandae vitae animi doloremque hic illum eaque tenetur optio reprehenderit nihil ullam provident natus labore voluptate iure quia aspernatur numquam ipsum corrupti distinctio debitis in omnis. Esse, placeat, cupiditate at eius vitae accusantium commodi quisquam magni vero nulla? Illum commodi laudantium quibusdam nobis officiis! Atque, eos, quia, eum dicta consectetur velit ratione quos asperiores nobis aperiam provident ipsum corporis quae! In, ullam, nobis, dolor, blanditiis similique ipsam officiis quos reprehenderit dolorum tempora earum assumenda impedit adipisci sed quibusdam eaque laborum facilis totam cumque ratione rerum repellat sapiente dignissimos nihil culpa. Delectus, natus, doloremque, eos, ea quae at voluptate corrupti ut hic asperiores itaque minus maiores laborum vel dolores magni incidunt tempore temporibus veniam voluptates soluta sunt doloribus mollitia voluptatum odio animi quibusdam fuga rerum laudantium inventore repellendus numquam ratione atque ipsam iste voluptatem commodi id. Ex, ipsam, dolor quasi adipisci perspiciatis excepturi eos dignissimos vitae iure culpa minus minima magni. Voluptatem, voluptatum ipsa molestias modi ducimus cum tempore explicabo rem. Tempore, aperiam, maxime, nostrum ut minima autem quae velit possimus amet quam est adipisci deleniti ea ad architecto. Porro, quisquam, saepe temporibus molestiae natus similique fugit dolore distinctio suscipit iste odio rem reiciendis deleniti sed enim. Cumque, voluptas, soluta numquam perspiciatis suscipit commodi ducimus odio odit veniam magni impedit adipisci amet quis doloribus dignissimos unde reprehenderit ad incidunt in dolore fugit delectus corporis tenetur officia illo sed distinctio fuga accusantium error pariatur voluptatibus explicabo eligendi dolorum! Ipsa, saepe asperiores voluptates velit quam quae illo necessitatibus temporibus exercitationem perferendis nobis facere. Veniam, fuga consectetur officiis molestias nam ex deleniti aperiam placeat provident debitis tempora soluta ducimus voluptatum blanditiis tempore. Blanditiis, soluta, ad officia eos voluptatum tenetur dolorum aliquid sit atque eum voluptas fugiat explicabo nulla illum consequatur necessitatibus animi amet alias doloremque.
                    </td>
                </tr>
            </tbody> <!-- tbody -->
    
            <tfoot>
                <tr>
                    <td>
                        <div class="print_footer">
                            <div class="print_footer_left">
                                <p>Company Reg No. 045 AB6</p>
                            </div>
                            <div class="print_footer_right">
                                <p>Registered Office Address: 123 Somewhere Avenue, </p>
                            </div>
                        </div>
                    </td>
                </tr>
            </tfoot> <!-- tfoot -->
        </table> <!-- table -->
    </div> <!-- wrapper -->
    HTML Code:
    .wrapper{
        width: 21cm;
        margin: auto;
    }
    
    .print_options{
        float: right;
    }
    
    .print_page{
        background: white; 
        font-size: 12pt; 
        float: left;
        padding: 10px;
        border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    .print_header{
        float: left;
        clear: both;
        width: 100%;
    }
    .print_header_logo{
        float: left;
    }
    .print_header_address{
        float: right;
        text-align: right;
        font-size: 0.7em;
        margin: 1.5em 0 0 0;
    }
    
    
    
    .print_footer{
        float: left;
        width: 100%;
        margin: 1em 0 0 0;
        font-size: 0.9em;
    }
    .print_footer_left{
        float: left;
    }
    .print_footer_right{
        float: right;
        text-align: right;
    }
    
    @page{
        margin: 0;
    }
    @media print {
        .wrapper{width: 90%; margin: auto; position: relative;}
        thead { display: table-header-group; }
        tfoot { display: table-footer-group;}
        .print_page{border: none; box-shadow: none;}
        .print_options{display: none;}
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The table foot element may print the footer on each page (in modern browsers) but on the last page or a short page the footer will follow the content. It won't automatically place it at the bottom of the printed paper as such. On full pages it gets printed at the bottom but the last page it will just follow the content which is reasonable as it may have column information necessary to make sense of the table so you don't want it miles away from the table.

    Therefore I don't believe there is anything you can do to change this behaviour.

    Some older browsers (IE8) will just print the table footer at the end of the document though anyway and not on every page (apparently you can specify explicitly tfoot { display: table-footer-group; } which is supposed to make IE8 then print the footer on every page but I haven't tested that).

    The specs actually define that UA's may print the footer on each page but don't specify the position.

    Also note that your table is invalid and a tfoot element must follow the thead element and the tbody element follows after both of the above. This is so that on very long tables the footer data is known before parsing the whole document and can therefore be actioned without waiting for the whole table to be parsed before obtaining the footer information.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •