<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
  </head>

  <h1>Note to test - open ONLY preview page in new tab  - then press ctrl + p</h1>
  <table border='1px thin grey' style='border-collapse:collapse;'>
    <thead>
      <tr>
        <th>
           <h2>This should increment every page on pressing "ctrl+p"</h2>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
        <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
        <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
        <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    <tr>
      <td class='bigtds'>some Useless TD</td>
    </tr>
    
  </table>
</html>
/* Add your styles here */


body {
  counter-reset: my-sec-counter;
}

h2::before {
  counter-increment: my-sec-counter;
  content: "Page " counter(my-sec-counter) ". ";
}

.bigtds {
  height :200px
}