1. Craig McQueen
  2. htmlFloatingTableHeader

Source

htmlFloatingTableHeader / tables.html

<html>
<head>
<title>Persistent Table Headers with jQuery</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="floatingtableheader.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            ActivateFloatingHeaders("table.tableWithFloatingHeader");
        });
    </script>

<style>
<!--
th {
    background-color: lightgrey;
    border: 1px solid black;
}
td {
    border: 1px solid black;
}
-->
</style>
</head>
<body>

<p>Leading lines</p><p>1</p><p>2</p><p>3</p><p>4</p>
<p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>

<table class="tableWithFloatingHeader" style="border: 3px">
<thead>
<tr>
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr>
</thead>
<tbody>
<tr>
    <td>table1 data1 with some extra long text. I would like to be able to "tweak" an HTML table's presentation to add a single feature: when scrolling down through the page so that the table is on the screen but the header rows are off-screen, I would like the headers to remain visible at the top of the viewing area.</td>
    <td>table1 data1</td>
</tr>
<tr>
    <td>table1 data2</td>
    <td>table1 data2</td>
</tr>
<tr>
    <td>table1 data3</td>
    <td>table1 data3</td>
</tr>
<tr>
    <td>table1 data4</td>
    <td>table1 data4</td>
</tr>
<tr>
    <td>table1 data5</td>
    <td>table1 data5</td>
</tr>
<tr>
    <td>table1 data6</td>
    <td>table1 data6</td>
</tr>
<tr>
    <td>table1 data7</td>
    <td>table1 data7</td>
</tr>
<tr>
    <td>table1 data8</td>
    <td>table1 data8</td>
</tr>
<tr>
    <td>table1 data9</td>
    <td>table1 data9</td>
</tr>
<tr>
    <td>table1 data10</td>
    <td>table1 data10</td>
</tr>
</tbody>
</table>

<p>Between lines</p><p>1</p><p>2</p><p>3</p><p>4</p>

<table class="tableWithFloatingHeader" style="border: 3px">
<thead>
<tr>
    <th>t2 col header</th>
    <th>t2 col header</th>
</tr>
</thead>
<tbody>
<tr>
    <td>t2 data1</td>
    <td>t2 data1</td>
</tr>
<tr>
    <td>t2 data2</td>
    <td>t2 data2</td>
</tr>
<tr>
    <td>t2 data3</td>
    <td>t2 data3</td>
</tr>
<tr>
    <td>t2 data4</td>
    <td>t2 data4</td>
</tr>
<tr>
    <td>t2 data5</td>
    <td>t2 data5</td>
</tr>
<tr>
    <td>t2 data6</td>
    <td>t2 data6</td>
</tr>
<tr>
    <td>t2 data7</td>
    <td>t2 data7</td>
</tr>
<tr>
    <td>t2 data8</td>
    <td>t2 data8</td>
</tr>
<tr>
    <td>t2 data9</td>
    <td>t2 data9</td>
</tr>
<tr>
    <td>t2 data10</td>
    <td>t2 data10</td>
</tr>
</tbody>
</table>

<p>Between lines</p><p>1</p><p>2</p><p>3</p><p>4</p>


  <table class="tableWithFloatingHeader">
    <thead>
      <tr>
        <th>MMMMMMMMMMMMM</th>
        <th>fffffffffffffff</th>
        <th>DDDDDDDDDDDDD</th>
        <th>TTTTT</th>

        <th>eEEEEe</th>
        <th>16/10</th>
          <th>17/10</th>
          <th>18/10</th>
          <th>19/10</th>
          <th>20/10</th>
          <th>21/10</th>
          <th>22/10</th>
          <th>23/10</th>
          <th>24/10</th>
          <th>25/10</th>
          <th>26/10</th>
          <th>27/10</th>
          <th>28/10</th>
          <th>29/10</th>
          <th>30/10</th>
          <th>31/10</th>
          <th>01/11</th>
          <th>02/11</th>
          <th>03/11</th>
          <th>04/11</th>
          <th>05/11</th>
          <th>06/11</th>
          <th>07/11</th>
          <th>08/11</th>
          <th>09/11</th>
          <th>10/11</th>
          <th>11/11</th>
          <th>12/11</th>
          <th>13/11</th>
          <th>14/11</th>
          <th>15/11</th>
      </tr>
    </thead>

    <tbody>
        <tr>
          <th>ooooo</th>
          <th>TTTTTTT)</th>
          <td>0</td>
          <td>0.00</td>
          <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>

        <tr>
          <th>ooooo</th>
          <th>TTTTTT (0)</th>
          <td>0</td>
          <td>0.00</td>
          <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>

        <tr>
          <th>ooooo</th>
          <th>TTTTTT (0)</th>
          <td>0</td>
          <td>0.00</td>
          <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>

        <tr>
          <th>ooooo</th>
          <th>TTTTTT (0)</th>
          <td>0</td>
          <td>0.00</td>
          <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>

    </tbody>
  </table>

<p>Trailing lines...</p>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>
<p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
<p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p>
<p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p>
<p>41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p>
<p>51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p><p>60</p>


</body>
</html>