Problem with setting dynamic table header

Question

I have a fully dynamic table here, all cells dynamically generate from database values. The problem is how to fix the table title always visible when scrolling through the x and y axics. I just insert the static codes and my violin. http://jsfiddle.net/kannankds/8gMVJ/5/

<div id="container">
<table id="my_table">
<thead>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr><td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
</div>

Answer 1

You can do this with css:

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

Html:

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
<tr> <th>1, 0</th> <th>2, 0</th> <th>3, 0</th> </tr>
<tr> <th>1, 1</th> <th>2, 1</th> <th>3, 1</th> </tr>
<tr> <th>1, 2</th> <th>2, 2</th> <th>3, 2</th> </tr>
<tr> <th>1, 3</th> <th>2, 3</th> <th>3, 3</th> </tr>
        </tbody>
    </table>
  </div>
</div>

Demo

You can also use

• FixedHeaderPlugin
• http://www.imaputz.com/cssStuff/bigFourVersion.html
• http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
• http://jsfiddle.net/deepakmanwal/dBe5w/

Answer 2

, /, , ,

http://www.imaputz.com/cssStuff/bigFourVersion.html