Print fixed header and footer on all pages

Question

How to print header and footer on all pages?

Here is a simple example about what I mean:

let table = document.getElementById('table');
for (let i = 1; i <= 100; i++) {
  table.insertAdjacentHTML('beforeend', `<tr><td>${i}</td><td>title ${i}</td><td>${i*3}$</td></tr>`);
}

@media print {
  .invoice-footer {
    height: 2rem;
    position: fixed;
    bottom: 0;
  }
  .no-print {
    display: none
  }
}

table {
  margin-bottom: 2rem;
}

<button onclick="window.print()" class="no-print">Print</button>
<div class="invoice">
  <img src="https://picsum.photos/200/150?random=1" width="200" class="invoice-logo">
  <hr>
  <table border="1" style="width:100%">
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody id="table"></tbody>
  </table>
  <div class="invoice-footer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

Answer 1

I solved it :) here is a live example:

table {
  width: 100%;
}

table.print-content {
  font-size: 12px;
  border: 1px solid #dee2e6;
  border-collapse: collapse !important;
}

table.print-content th,
table.print-content td {
  padding: .2rem .4rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

@media print {
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .no-print {
    display: none
  }
}

<button onclick="window.print()" class="no-print">Print</button>

<table>
  <!-- Start Header -->
  <thead>
    <tr>
      <td>
        <img src="https://logoipsum.com/logo/logo-4.svg" width="300">
      </td>
    </tr>
  </thead>
  <!-- End Header -->
  <tr>
    <td>
      <h1>Some text on the first page only</h1>
      <!-- Start Print Content -->
      <table class="print-content">
        <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>
      <!-- End Print Content -->
    </td>
  </tr>
  <tr>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </td>
  </tr>
  <!-- Start Space For Footer -->
  <tfoot>
    <tr>
      <td style="height: 3cm">
        <!-- Leave this empty and don't remove it. This space is where footer placed on print -->
      </td>
    </tr>
  </tfoot>
  <!-- End Space For Footer -->
</table>

<!-- Start Footer -->
<div class="print-footer">
  <h2>Here is the fixed Footer</h2>
</div>
<!-- End Footer -->