How to print page exactly it looks on screen using window.print()?


I have designed a form for my project and I want to print the form. The form looks like below:
Actual Form

I was trying to use window.print() method to print it. But it changed the style in print preview like below: print preview

Here’s my code that I’ve done. Let me know if there any possible way to solve this issue and print exactly it shown in the window. Thanks in advance.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <link rel="stylesheet" type="text/css" href="Registrationform.css">
</head>
<body>



<div style="width:670px; padding:30px; box-shadow: 5px 5px 5px 5px #888888;" class="container">
        <table style="margin: auto;">
            <tr>
                <td><img width="60px" height="60px" src="imagesNSTU-logo.png"></td>
                <td>
                <div class = "header-name">
                <h6 style="text-align: center; margin: 0 auto;">NOAKHALI SCIENCE AND TECHNOLOGY UNIVERSITY</h6>
                <p style="text-align: center; margin:auto;">Noakhali-3814, Bangladesh</p>
                <h6 style="text-align: center;margin: auto;">COURSE REGISTRATION FORM</h6>
                </div>
            </td>
            </tr>
        </table>
        <hr>
        

    
        <form action="" method="POST">
            <!-- <div style=" align-content: center;" class = "std-header-info"> -->
                 <div>
                     <label>Name</label>
                     <input class="text" style = "width: 365px; text-align: center;" type="text" id = 'name' placeholder="" value="Khair" readonly>
                     <label>Roll</label>
                     <input class="text" style = "width: 160px; text-align: center;" type="text" id = 'roll' placeholder="" value="12" readonly> <br>
                 </div>
                 <div>
                    <label>Department</label>
                     <input class="text" style = "width: 230px; text-align: center;" type="text" id = 'department' placeholder="" value="IIT" readonly>
                     <label>Institute/Faculty</label>
                     <input class="text" style = "width: 165px; text-align: center;" type="text" id = 'institute' placeholder="" value="IIT" readonly>
                     <br/>
                 </div>

                 <div>
                     <label>Year</label>
                     <input class="text" style = "width: 120px; text-align: center;" type="text" id = 'year' placeholder="" value="2012" readonly>
                     <input type="hidden" name="year" value="" />

                     <label>Term</label>
                     <input class="text" style = "width: 150px; text-align: center;" type="text" id = 'term' placeholder="" value="2" readonly>

                     <label>Session</label>
                     <input class="text" style = "width: 200px; text-align: center;" type="text" id = 'session' placeholder="" value="2017" readonly>
                 </div>
                 <br/>


            


                 <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Course Code</th>
                                <th>Course Title</th>
                                <th>Credits</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            
                        </tbody>
                    </table>
                 </div>
                 
                 <div>
                     <table style="font-size: 10px;" class="table table-bordered" id="table">
                        <tr class="borderless">
                            <td style="border: none;"></td>
                            <td style="border: none;"></td>
                            <td colspan="2">Year 1</td>
                            <td colspan="2">Year 2</td>
                            <td colspan="2">Year 3</td>
                            <td colspan="2">Year 4</td>
                            <td colspan="2">Year 5</td>
                        </tr>
                        <tr style="font-size: 8px">
                            <td style="border: none;"></td>
                            <td style="border: none;"></td>
                            <td>Term-I</td>
                            <td>Term-II</td>
                            <td>Term-I</td>
                            <td>Term-II</td>
                            <td>Term-I</td>
                            <td>Term-II</td>
                            <td>Term-I</td>
                            <td>Term-II</td>
                            <td>Term-I</td>
                            <td>Term-II</td>
                        </tr>
                     
                        <tr>
                            <td colspan="2">Credit <br> Completed </td> 
                            
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2">GPA</td>
                            <td>3.23</td>
                            <td>3.21</td>
                            <td>3.43</td>
                            <td>3.52</td>
                            <td>3.12</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>

                        </tr>

                     </table>
                 </div>
</form>
</div>

<script type="text/javascript">
    window.print()
</script>
</body>
</html> 

Source: CSS – Stack Overflow

November 30, 2021
Category : News
Tags: css | html | javascript | php

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.