I have designed a form for my project and I want to print the form. The form looks like below:
I was trying to use window.print() method to print it. But it changed the style in print preview like below: 
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>