HTML table headers to be fixed without scrolling

Question

Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ . I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance. My html code:

<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td> 
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
 <tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">

<table width="300px" border="1" class="newTable">
    <tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
    <tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;1</td>
<td class="rowStyle">data1  </td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;2</td>
<td class="rowStyle">data2</td></tr>

<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data&nbsp;&nbsp;&nbsp;3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>


</table>
</td>
</tr>
</table>
</div>

Answer 1

You have to put your header in a seperate table and put a fixed position on it. Take a look at this.

http://jsfiddle.net/7t9qkLc0/47/

<table width="290px" border="1" class="newTable">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
     </tr>
</table>
<table style="margin-top:25px">
<tr> ....

Answer 2

Try it like this:

Changed this in the HTML:

<th>Column1
  <div>Column111</div>
</th>
<th>Column2
  <div>Column222</div>
</th>

(The divs are new)

And add this CSS:

th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: blue;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  line-height: normal;
  border-left: 1px solid #800;
}

NOTE: The css is a little bit rough, but with a little bit styling it will look better

FIDDLE

---

Another way is to separate the headerline from the table and make them 2 elements.

Answer 3

you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.

th {
    position: fixed;
}

I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/