CODEWITHSUNDEEP
javascripthtmlcss
Andrei B
Andrei B

Reputation: 48

How to make HTML perfect on Print view with CSS and javascript?

I have some problems with the Print view on the browser. While looking perfect for Web browser view, it is not same in the Print view. For example, Setting the margin or Padding on Print View is not working for me. Also, rotating the table on Print view(vertical align) is pretty unfamiliar to me. How can I deal with the problems using HTML, CSS, and javascript?

Upvotes: 1

Views: 2671

Answers (1)

MD.ALIMUL Alrazy
MD.ALIMUL Alrazy

Reputation: 330





        body {
            margin: 0;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .page {
            width: 21cm;
            min-height: 29.7cm;
            padding: 2cm;
            margin: 1cm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .subpage {
            padding: 1cm;
            border: 5px red solid;
            height: 256mm;
            outline: 2cm #FFEAEA solid;
        }
        
        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }


    <div class="book">
        <div class="page">
            <div class="subpage">Page 1/2</div>    
        </div>
        <div class="page">
            <div class="subpage">Page 2/2</div>    
        </div>
    </div>

Upvotes: 2

Related Questions