3

Using the solution at here https://stackoverflow.com/a/47919120/487460, I could repeat the header on every page. But if the header height increases, it doesn't repeat anymore!

Is there any limitation on thead to repeat? If so, how can I increase that?

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <script type="text/javascript">
    function PrintPage() {
      document.getElementById('print').style.display = 'none';
      window.resizeTo(960, 600);
      document.URL = "";
      window.location.href = "";
      window.print();
    }
  </script>
  <style type="text/css" media="print">
    @page {
      size: auto;
      /* auto is the initial value */
      margin: 2mm 4mm 0mm 0mm;
      /* this affects the margin in the printer settings */
    }
    
    thead {
      display: table-header-group;
    }
    
    tfoot {
      display: table-footer-group;
    }
  </style>
  <style type="text/css" media="screen">
    thead {
      display: block;
    }
    
    tfoot {
      display: block;
    }
  </style>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <table style="width: 500px; margin: 0 auto;">
        <thead>
          <tr>
            <td>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
              <p>header comes here for each page</p>
            </td>
          </tr>
        </thead>
        <tbody>
             <tr><td>1</td></tr>
             <tr><td>2</td></tr>
             <tr><td>3</td></tr>
             <tr><td>4</td></tr>
             <tr><td>5</td></tr>
             <tr><td>6</td></tr>
             <tr><td>7</td></tr>
             <tr><td>8</td></tr>
             <tr><td>9</td></tr>
             <tr><td>10</td></tr>
             <tr><td>11</td></tr>
             <tr><td>12</td></tr>
             <tr><td>13</td></tr>
             <tr><td>14</td></tr>
             <tr><td>15</td></tr>
             <tr><td>16</td></tr>
             <tr><td>17</td></tr>
             <tr><td>18</td></tr>
             <tr><td>19</td></tr>
             <tr><td>20</td></tr>
             <tr><td>21</td></tr>
             <tr><td>22</td></tr>
             <tr><td>23</td></tr>
             <tr><td>24</td></tr>
             <tr><td>25</td></tr>
             <tr><td>26</td></tr>
             <tr><td>27</td></tr>
             <tr><td>28</td></tr>
             <tr><td>29</td></tr>
             <tr><td>30</td></tr>
             <tr><td>31</td></tr>
             <tr><td>32</td></tr>
             <tr><td>33</td></tr>
             <tr><td>34</td></tr>
             <tr><td>35</td></tr>
             <tr><td>36</td></tr>
             <tr><td>37</td></tr>
             <tr><td>38</td></tr>
             <tr><td>39</td></tr>
             <tr><td>40</td></tr>
             <tr><td>41</td></tr>
             <tr><td>42</td></tr>
             <tr><td>43</td></tr>
             <tr><td>44</td></tr>
             <tr><td>45</td></tr>
             <tr><td>46</td></tr>
             <tr><td>47</td></tr>
             <tr><td>48</td></tr>
             <tr><td>49</td></tr>
             <tr><td>50</td></tr>
             <tr><td>51</td></tr>
             <tr><td>52</td></tr>
             <tr><td>53</td></tr>
             <tr><td>54</td></tr>
             <tr><td>55</td></tr>
        </tbody>
        <tfoot>
          <tr>
            <td>
              footer comes here for each page
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <br clear="all" />
    <input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();" class="button" />
  </form>
</body>

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
mtoloo
  • 1,795
  • 3
  • 22
  • 28
  • What do you expect `window.location.href = "";` to do? – mplungjan Nov 11 '21 at 10:49
  • I didn't use the print button at all! It was on https://stackoverflow.com/a/47919120/487460 post @mplungjan – mtoloo Nov 13 '21 at 05:53
  • @mtoloo have you found the solution. Today I am facing same issue when I increase height of empty th cell to avoid repeating content overlapping then it stops repeating. It works fine till height: 120pt but greater than this it stops repeating and on other pages the content starts overlapping – Muzamil Abbas Jul 05 '23 at 18:43

2 Answers2

-1

inside of using: <td/> tag in thead use <th/>

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>The thead, tbody, and tfoot elements</h1>

    <table>
      <thead>
        <tr>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th>
            <p></p>
            <p>header comes here for each page</p>
            <p />
          </th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
          <th><p>header comes here for each page</p></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
ani chan
  • 51
  • 5
-3

The trick is to use th in the table header:

 @page {
      size: auto;
      /* auto is the initial value */
      margin: 2mm 4mm 0mm 0mm;
      /* this affects the margin in the printer settings */
    }
<form id="form1" runat="server">
    <div>
      <table style="width: 500px; margin: 0 auto;">
        <thead>
          <tr>
            <th>
             Table header
            </th>
          </tr>
        </thead>
        <tbody>
             <tr><td>1</td></tr>
             <tr><td>2</td></tr>
             <tr><td>3</td></tr>
             <tr><td>4</td></tr>
             <tr><td>5</td></tr>
             <tr><td>6</td></tr>
             <tr><td>7</td></tr>
             <tr><td>8</td></tr>
             <tr><td>9</td></tr>
             <tr><td>10</td></tr>
             <tr><td>11</td></tr>
             <tr><td>12</td></tr>
             <tr><td>13</td></tr>
             <tr><td>14</td></tr>
             <tr><td>15</td></tr>
             <tr><td>16</td></tr>
             <tr><td>17</td></tr>
             <tr><td>18</td></tr>
             <tr><td>19</td></tr>
             <tr><td>20</td></tr>
             <tr><td>21</td></tr>
             <tr><td>22</td></tr>
             <tr><td>23</td></tr>
             <tr><td>24</td></tr>
             <tr><td>25</td></tr>
             <tr><td>26</td></tr>
             <tr><td>27</td></tr>
             <tr><td>28</td></tr>
             <tr><td>29</td></tr>
             <tr><td>30</td></tr>
             <tr><td>31</td></tr>
             <tr><td>32</td></tr>
             <tr><td>33</td></tr>
             <tr><td>34</td></tr>
             <tr><td>35</td></tr>
             <tr><td>36</td></tr>
             <tr><td>37</td></tr>
             <tr><td>38</td></tr>
             <tr><td>39</td></tr>
             <tr><td>40</td></tr>
             <tr><td>41</td></tr>
             <tr><td>42</td></tr>
             <tr><td>43</td></tr>
             <tr><td>44</td></tr>
             <tr><td>45</td></tr>
             <tr><td>46</td></tr>
             <tr><td>47</td></tr>
             <tr><td>48</td></tr>
             <tr><td>49</td></tr>
             <tr><td>50</td></tr>
             <tr><td>51</td></tr>
             <tr><td>52</td></tr>
             <tr><td>53</td></tr>
             <tr><td>54</td></tr>
             <tr><td>55</td></tr>
        </tbody>
        <tfoot>
          <tr>
            <td>
              footer comes here for each page
            </td>
          </tr>
        </tfoot>
      </table>
    </div>

  </form>
Azu
  • 1,494
  • 2
  • 6
  • 11
  • No! The same problem!! If you repeat the `Table header` for 13 times or more, the header will not repeat on the second page – mtoloo Nov 13 '21 at 06:02
  • Why to repeat it 13 times? – Azu Nov 13 '21 at 08:03
  • I have a long header in my real project. Here for simple question I repeated this header to show having a long header. If the header height exceeds 280 pixels, that wouldn't repeat! – mtoloo Nov 23 '21 at 09:24
  • You could use one `th` and place many divs or `p` inside. – Azu Nov 23 '21 at 16:02
  • If you see in my question, I used one `td` and many `p` inside. I changed the `td` to `th`, but the same problem is still exists. – mtoloo Nov 24 '21 at 07:21