CSS - Toughest Question Ever | Frozen Table Headers

programming web dev
1

Hey Everyone!

I need some help, I have really been struggling with this one. I have a table that cannot be changed, in other words, no adding <theads> or id’s or classes, I need to get a frozen header with just the existing code, and CSS skillz. Here is the table layout:

<table class="Grid">
  <tr>
    <th scope="col">Data1</th>
    <th scope="col">Data2</th>
  </tr>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
  </tr>
  <tr>
    <td>4.1</td>
    <td>4.2</td>
  </tr>
</table>

So here is the idea of the frozen header and how it works:
http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html

How can I get that effect, using the table code above, and any CSS. Thanks!!! HUGE kudos to whoever can help me figure it out.

J.J.