I need both fixed headers and fixed columns at the same time.
I want to have fixed headers (first row and first column) and a scrollable table displaying at a given time.
IMP Point:
This would allow me to scroll horizontaly without have the header column moving, and to scroll verticaly without having the header row moving (by some absolute positioning within its parents I guess ?).
PS: I have searched a lot, but what i could found is, only fixed headers or fixed first column. I want both at a time. Here is the fiddle which contains fixed column, Please help 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 for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for 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 for 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 for booking</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you and have nice day.
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
Create a Table That Has a Fixed Header. We can create an HTML table that has a fixed header with some CSS. We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable. To make it scrollable, we set the overflow CSS property to scroll .
I finally Got the answer, I used the https://github.com/meetselva/fixed-table-rows-cols
Here is the working fiddle http://jsfiddle.net/cfr94p3w/17/
It's simple to use. Just take normal HTML table and apply the 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: Thanks everybody, mostly 'Bas van Stein' for the assistance.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With