<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Print Fixed Header & Footer</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<style>
@media print {
button {
display: none;
}
}
</style>
</head>
<body>
<!-- https://stackoverflow.com/questions/55768341/print-fixed-header-and-footer-on-all-pages -->
<div class="A4">
<button type="button" onclick="window.print();">Print</button>
<table class="top">
<thead>
<tr>
<td>
<h1>Fixed-Header On Every Page</h1>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>Some text on the first page only</h2>
Credits: <a target="_blank" href="https://stackoverflow.com/questions/55768341/print-fixed-header-and-footer-on-all-pages">https://stackoverflow.com/questions/55768341/print-fixed-header-and-footer-on-all-pages</a>
<table>
<thead>
<tr>
<th>#</th>
<th>Position</th>
<th>Dollar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Title1</td>
<td>1$</td>
</tr>
<tr>
<td>2</td>
<td>Title2</td>
<td>2$</td>
</tr>
<tr>
<td>3</td>
<td>Title3</td>
<td>3$</td>
</tr>
<tr>
<td>4</td>
<td>Title4</td>
<td>4$</td>
</tr>
<tr>
<td>5</td>
<td>Title5</td>
<td>5$</td>
</tr>
<tr>
<td>6</td>
<td>Title6</td>
<td>6$</td>
</tr>
<tr>
<td>7</td>
<td>Title7</td>
<td>7$</td>
</tr>
<tr>
<td>8</td>
<td>Title8</td>
<td>8$</td>
</tr>
<tr>
<td>9</td>
<td>Title9</td>
<td>9$</td>
</tr>
<tr>
<td>10</td>
<td>Title10</td>
<td>10$</td>
</tr>
<tr>
<td>11</td>
<td>Title11</td>
<td>11$</td>
</tr>
<tr>
<td>12</td>
<td>Title12</td>
<td>12$</td>
</tr>
<tr>
<td>13</td>
<td>Title13</td>
<td>13$</td>
</tr>
<tr>
<td>14</td>
<td>Title14</td>
<td>14$</td>
</tr>
<tr>
<td>15</td>
<td>Title15</td>
<td>15$</td>
</tr>
<tr>
<td>16</td>
<td>Title16</td>
<td>16$</td>
</tr>
<tr>
<td>17</td>
<td>Title17</td>
<td>17$</td>
</tr>
<tr>
<td>18</td>
<td>Title18</td>
<td>18$</td>
</tr>
<tr>
<td>19</td>
<td>Title19</td>
<td>19$</td>
</tr>
<tr>
<td>20</td>
<td>Title20</td>
<td>20$</td>
</tr>
<tr>
<td>21</td>
<td>Title21</td>
<td>21$</td>
</tr>
<tr>
<td>22</td>
<td>Title22</td>
<td>22$</td>
</tr>
<tr>
<td>23</td>
<td>Title23</td>
<td>23$</td>
</tr>
<tr>
<td>24</td>
<td>Title24</td>
<td>24$</td>
</tr>
<tr>
<td>25</td>
<td>Title25</td>
<td>25$</td>
</tr>
<tr>
<td>26</td>
<td>Title26</td>
<td>26$</td>
</tr>
<tr>
<td>27</td>
<td>Title27</td>
<td>27$</td>
</tr>
<tr>
<td>28</td>
<td>Title28</td>
<td>28$</td>
</tr>
<tr>
<td>29</td>
<td>Title29</td>
<td>29$</td>
</tr>
<tr>
<td>30</td>
<td>Title30</td>
<td>30$</td>
</tr>
<tr>
<td>31</td>
<td>Title31</td>
<td>31$</td>
</tr>
<tr>
<td>32</td>
<td>Title32</td>
<td>32$</td>
</tr>
<tr>
<td>33</td>
<td>Title33</td>
<td>33$</td>
</tr>
<tr>
<td>34</td>
<td>Title34</td>
<td>34$</td>
</tr>
<tr>
<td>35</td>
<td>Title35</td>
<td>35$</td>
</tr>
<tr>
<td>36</td>
<td>Title36</td>
<td>36$</td>
</tr>
<tr>
<td>37</td>
<td>Title37</td>
<td>37$</td>
</tr>
<tr>
<td>38</td>
<td>Title38</td>
<td>38$</td>
</tr>
<tr>
<td>39</td>
<td>Title39</td>
<td>39$</td>
</tr>
<tr>
<td>40</td>
<td>Title40</td>
<td>40$</td>
</tr>
<tr>
<td>41</td>
<td>Title41</td>
<td>41$</td>
</tr>
<tr>
<td>42</td>
<td>Title42</td>
<td>42$</td>
</tr>
<tr>
<td>43</td>
<td>Title43</td>
<td>43$</td>
</tr>
<tr>
<td>44</td>
<td>Title44</td>
<td>44$</td>
</tr>
<tr>
<td>45</td>
<td>Title45</td>
<td>45$</td>
</tr>
<tr>
<td>46</td>
<td>Title46</td>
<td>46$</td>
</tr>
<tr>
<td>47</td>
<td>Title47</td>
<td>47$</td>
</tr>
<tr>
<td>48</td>
<td>Title48</td>
<td>48$</td>
</tr>
<tr>
<td>49</td>
<td>Title49</td>
<td>49$</td>
</tr>
<tr>
<td>50</td>
<td>Title50</td>
<td>50$</td>
</tr>
<tr>
<td>51</td>
<td>Title51</td>
<td>51$</td>
</tr>
<tr>
<td>52</td>
<td>Title52</td>
<td>52$</td>
</tr>
<tr>
<td>53</td>
<td>Title53</td>
<td>53$</td>
</tr>
<tr>
<td>54</td>
<td>Title54</td>
<td>54$</td>
</tr>
<tr>
<td>55</td>
<td>Title55</td>
<td>55$</td>
</tr>
<tr>
<td>56</td>
<td>Title56</td>
<td>56$</td>
</tr>
<tr>
<td>57</td>
<td>Title57</td>
<td>57$</td>
</tr>
<tr>
<td>58</td>
<td>Title58</td>
<td>58$</td>
</tr>
<tr>
<td>59</td>
<td>Title59</td>
<td>59$</td>
</tr>
<tr>
<td>60</td>
<td>Title60</td>
<td>60$</td>
</tr>
<tr>
<td>61</td>
<td>Title61</td>
<td>61$</td>
</tr>
<tr>
<td>62</td>
<td>Title62</td>
<td>62$</td>
</tr>
<tr>
<td>63</td>
<td>Title63</td>
<td>63$</td>
</tr>
<tr>
<td>64</td>
<td>Title64</td>
<td>64$</td>
</tr>
<tr>
<td>65</td>
<td>Title65</td>
<td>65$</td>
</tr>
<tr>
<td>66</td>
<td>Title66</td>
<td>66$</td>
</tr>
<tr>
<td>67</td>
<td>Title67</td>
<td>67$</td>
</tr>
<tr>
<td>68</td>
<td>Title68</td>
<td>68$</td>
</tr>
<tr>
<td>69</td>
<td>Title69</td>
<td>69$</td>
</tr>
<tr>
<td>70</td>
<td>Title70</td>
<td>70$</td>
</tr>
<tr>
<td>71</td>
<td>Title71</td>
<td>71$</td>
</tr>
<tr>
<td>72</td>
<td>Title72</td>
<td>72$</td>
</tr>
<tr>
<td>73</td>
<td>Title73</td>
<td>73$</td>
</tr>
<tr>
<td>74</td>
<td>Title74</td>
<td>74$</td>
</tr>
<tr>
<td>75</td>
<td>Title75</td>
<td>75$</td>
</tr>
<tr>
<td>76</td>
<td>Title76</td>
<td>76$</td>
</tr>
<tr>
<td>77</td>
<td>Title77</td>
<td>77$</td>
</tr>
<tr>
<td>78</td>
<td>Title78</td>
<td>78$</td>
</tr>
<tr>
<td>79</td>
<td>Title79</td>
<td>79$</td>
</tr>
<tr>
<td>80</td>
<td>Title80</td>
<td>80$</td>
</tr>
<tr>
<td>81</td>
<td>Title81</td>
<td>81$</td>
</tr>
<tr>
<td>82</td>
<td>Title82</td>
<td>82$</td>
</tr>
<tr>
<td>83</td>
<td>Title83</td>
<td>83$</td>
</tr>
<tr>
<td>84</td>
<td>Title84</td>
<td>84$</td>
</tr>
<tr>
<td>85</td>
<td>Title85</td>
<td>85$</td>
</tr>
<tr>
<td>86</td>
<td>Title86</td>
<td>86$</td>
</tr>
<tr>
<td>87</td>
<td>Title87</td>
<td>87$</td>
</tr>
<tr>
<td>88</td>
<td>Title88</td>
<td>88$</td>
</tr>
<tr>
<td>89</td>
<td>Title89</td>
<td>89$</td>
</tr>
<tr>
<td>90</td>
<td>Title90</td>
<td>90$</td>
</tr>
<tr>
<td>91</td>
<td>Title91</td>
<td>91$</td>
</tr>
<tr>
<td>92</td>
<td>Title92</td>
<td>92$</td>
</tr>
<tr>
<td>93</td>
<td>Title93</td>
<td>93$</td>
</tr>
<tr>
<td>94</td>
<td>Title94</td>
<td>94$</td>
</tr>
<tr>
<td>95</td>
<td>Title95</td>
<td>95$</td>
</tr>
<tr>
<td>96</td>
<td>Title96</td>
<td>96$</td>
</tr>
<tr>
<td>97</td>
<td>Title97</td>
<td>97$</td>
</tr>
<tr>
<td>98</td>
<td>Title98</td>
<td>98$</td>
</tr>
<tr>
<td>99</td>
<td>Title99</td>
<td>99$</td>
</tr>
<tr>
<th colspan="2">Sum</th>
<th>10$</th>
</tr>
</tbody>
</table>
<h2>Some text on the last page only</h2>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="height: 50mm">
<!-- Adjust height as needed to compensate for footer -->
</td>
</tr>
</tfoot>
</table>
<div class="footer">
<h1>Fixed-Footer On Every Page</h1>
</div>
</div>
</body>
</html>
@page {
size: A4 portrait;
}
@media print {
.footer {
position: fixed;
bottom: 0px;
}
}
body {
display: flex;
justify-content: center;
margin: 0px;
padding: 0px;
border: 0px;
}
.A4 {
width: calc(210mm - 1in);
height: calc(297mm - 1in);
margin: 0px auto;
padding: 0px;
border: 0px;
}
.top,
.footer {
width: calc(210mm - 1in);
margin: 0px auto;
}
table {
width: 100%;
}