would like some help as i m trying to print the html page. I would like to have the header and the footer on all pages when printing.
this is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style media="screen">
.header{
top: 0;
width: 100%;
height: 100px;
height: 100px;
}
.content{
}
.footer{
padding-top: 50px;
width: 100%;
height: 100px;
}
</style>
<div class="header">
header
</div>
<div class="content">
<table>
<tr><td>dfdsfsdfsdf start</td></tr>
<tr><td>dfdsfsdfsdf</td></tr>
<tr><td>dfdsfsdfsdf</td></tr>
<tr><td>dfdsfsdfsdf end</td></tr>
<!-- there will be around 1000 record of <tr><td></td></tr>-->
</table>
</div>
<div class="footer">
footer
</div>
</body>
</html>
currently the header is not in the second page and the footer goes to the second page and there is no footer for the first page. So how can i do it so that it will look like a bank statement or any other statement where on every page there is a header and a footer and the value from the table remains in the middle of every page
Here is the image which i m getting currently Here is the image which i m getting currently
