How do I create an HTML table with a fixed/frozen left column and a scrollable body?
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
Relevant HTML & CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>Html table with fixed header and fixed column both
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.
Making html table scrollable with first row and column fixed
You can do something like this(View in full screen for good visualization):
$(document).ready(function() { $('tbody').scroll(function(e) { //detect a scroll event on the tbody $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody });});table { position: relative; width: 900px; background-color: #aaa; overflow: hidden; border-collapse: collapse;}
/*thead*/
thead { position: relative; display: block; width: 900px; overflow: visible;}
thead th { background-color: #99a; min-width: 120px; height: 32px; border: 1px solid #222;}
thead th:nth-child(1) { /*first cell in the header*/ position: relative; display: block; /*seperates the first cell in the header from the header*/ background-color: #88b;}
/*tbody*/
tbody { position: relative; display: block; width: 900px; height: 239px; overflow: scroll;}
tbody td { background-color: #bbc; min-width: 120px; border: 1px solid #222;}
tbody tr td:nth-child(1) { position: relative; display: block; height: 40px; background-color: #99a;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head> <title>sample</title> <meta charset="utf-8" http-equiv="refresh" content="300"> <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"></head>
<body> <div class="container"> <table class="checkBox"> <thead> <tr>
<th>Name</th> <th>user1</th> <th>user2</th> <th>user3</th> <th>user4</th> <th>user5</th> <th>user6</th> <th>user7</th> <th>user8</th> <th>user9</th> <th>user10</th> <th>user11</th> <th>user12</th> <th>user13</th> </tr> </thead> <tbody> <tr id='row1'> <td>row1</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row2'> <td>row2</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row3'> <td>row3</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row4'> <td>row4</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row5'> <td>row5</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row6'> <td>row6</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row7'> <td>row7</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row8'> <td>row8</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row9'> <td>row9</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr> <tr id='row10'> <td>row10</td> <td id='user1'></td> <td id='user2'></td> <td id='user3'></td> <td id='user4'></td> <td id='user5'></td> <td id='user6'></td> <td id='user7'></td> <td id='user8'></td> <td id='user9'></td> <td id='user10'></td> <td id='user11'></td> <td id='user12'></td> <td id='user13'></td> </tr>
</tbody> </table> </div></body>Related Topics
Angular Load Async Data Before Component Initialization
Calculate Percentage JavaScript
How to Refresh Select Option List After Ajax Response
Write a Auto-Fill and Submit Web Form Program
How to Wait Until 2 $Http Requests End in Angularjs
Executing Nodejs Script File in PHP Using Exec()
Get Array of Values from Multiple Inputs Using Jquery
Handle File Download from Ajax Post
Getting an Array of Column Names At Sheetjs
How to Hash Passwords Before Posting and Then Using Bcrypt
React Component Not Re-Rendering When State Changes
How to Clear All Input Fields in Bootstrap Modal When Clicking Data-Dismiss Button
How to Add Button on Each Row in Datatable
Refresh Leaflet Map: Map Container Is Already Initialized
How to Make Select Option Disable