javascript - Html table with fixed header and fixed column both -

i need both fixed headers , fixed columns @ same time.

i want have fixed headers (first row , first column) , scrollable table displaying @ given time.

• a left 1 containing header column
• a right 1 containing header row , table

imp point:

• when data moves horizontally: fixed header(first row move accordingly)
• when data moves vertically: fixed column(first column move accordingly)

this allow me scroll horizontaly without have header column moving, , scroll verticaly without having header row moving (by absolute positioning within parents guess ?).

ps: have searched lot, found is, fixed headers or fixed first column. want both @ time. here fiddle contains fixed column, please me in adding fixed header(first row) in it.

fiddle: http://jsfiddle.net/cfr94p3w/

html code:

<div class="table-container">     <div class="headcol">         <table>             <thead>                 <th>room</th>             </thead>             <tbody>                 <tr>                     <td>fooname</td>                 </tr>                 <tr>                     <td>barname</td>                 </tr>                 <tr>                     <td>barfoo</td>                 </tr>                 <tr>                     <td>zorzor</td>                 </tr>                 <tr>                     <td>lorname ipsname</td>                 </tr>             </tbody>         </table>     </div>     <div class="right">         <table>             <thead>                 <th>8-10</th>                 <th>10-12</th>                 <th>12-14</th>                 <th>14-16</th>                 <th>16-18</th>                 <th>18-20</th>             </thead>             <tbody>                 <tr>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell available">available booking</td>                 </tr>                 <tr>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                 </tr>                 <tr>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell available">available booking</td>                 </tr>                 <tr>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell available">available booking</td>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                 </tr>                 <tr>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                     <td class="cell booked">already booked</td>                     <td class="cell available">available booking</td>                 </tr>             </tbody>         </table>     </div> </div> 

thank , have nice day.

i got answer, used https://github.com/meetselva/fixed-table-rows-cols

here working fiddle http://jsfiddle.net/cfr94p3w/17/

it's simple use. take normal html table , apply plugin
js: https://rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js
css: https://rawgit.com/meetselva/fixed-table-rows-cols/master/css/fixed_table_rc.css

$(document).ready(function() {     $('#fixedheader').fxdhdrcol({         fixedcols:  2,         width:     "100%",         height:    400,         colmodal: [                { width: 100, align: 'center' },                { width: 70, align: 'center' },                { width: 70, align: 'left' },                { width: 70, align: 'left' },                { width: 70, align: 'left' },                { width: 70, align: 'left' },                { width: 70, align: 'left' },                { width: 70, align: 'center' },         ],     });    }); 

ps: everybody, 'bas van stein' assistance.