在所有页面上打印固定的页眉和页脚

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 -->