How to Create Table With First Column Frozen?
December 12th, 2005
Here is a HTML technique that can be used to create a table for data such that we can freeze the first column and add a scrollbar for rest of the columns as illustrated below.
|
|
HTML Used to create above table structure is:
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td id="table_heading">
<table cellspacing="0" cellpadding="0" id="heading_table">
<tr><th>Heading</th></tr>
<tr><td>Heading</td></tr>
<tr><td>This is a long Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td>Heading</td></tr>
<tr><td class="last_th"> </td></tr>
</table>
</td>
<td>
<div id="table_data">
<table cellspacing="0" cellpadding="0" id="data_table">
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th class="last_td">Heading</th>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="long_ht">xxxx</td>
<td class="last_td long_ht">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td class="last_td">xxxx</td>
</tr>
<tr>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_row">xxxx</td>
<td class="last_td_row">xxxx</td>
</tr>
</table>
<div class="height_for_safari"></div>
</div>
</td>
</tr>
</table>
</div>
CSS Rules Used to create above table structure is
#table_div td {vertical-align:top;}
#table_heading {background-color:#FFF; border:1px solid #688FA3;}
#heading_table {width:100%; padding:0; border:0;}
#heading_table th {background-color:#B8CAD4; border-bottom:1px solid #688FA3; padding:0 6px; vertical-align:middle; height:35px; font:bold 11px Arial, Helvetica, sans-serif; color:#000; margin:0;}
#heading_table td {background-color:#FFF; border-bottom:1px solid #688FA3; padding:0 6px; vertical-align:middle; height:35px; font:bold 11px Arial, Helvetica, sans-serif; color:#000; margin:0;}
#heading_table td.last_th {border-right:0; border-bottom:0; margin:0; height:5px; padding:0;}
#table_data {width:400px; border-right:1px solid #688FA3; border-top:1px solid #688FA3; border-bottom:1px solid #688FA3; overflow:auto; background-color:#FFF;}
#data_table {width:100%; padding:0; border-bottom:1px solid #688FA3; margin:0; background-color:#FFF;}
.height_for_safari {height:15px; background-color:#FFF;}
#data_table th {background-color:#B8CAD4; border-bottom:1px solid #688FA3; vertical-align:middle; height:35px; font:bold 11px Arial, Helvetica, sans-serif; color:#000; margin:0; text-align:center; border-right:1px solid #688FA3; padding:0 6px;}
#data_table td {background-color:#FFF; border-bottom:1px solid #688FA3; vertical-align:middle; height:35px; font:bold 11px Arial, Helvetica, sans-serif; color:#000; margin:0; text-align:center; border-right:1px solid #688FA3; text-align:center; white-space:nowrap; padding:0 2px;}
#data_table .long_ht {height:42px;}
#data_table td.last_td {border-right:0; border-bottom:1px solid #688FA3; }
#data_table td.last_row {border-right:1px solid #688FA3; border-bottom:0; }
#data_table td.last_td_row {border-right:0; border-bottom:0; }
* html #table_data {width:400px; overflow-x:scroll; overflow-y:visible; }
Please note that I wanted to show just the horizontal scrollbar and not the vertical scrollbar. For FireFox this was easy as all I had to do was declare overflow:auto style for the div with scrollbar.
For Internet Explorer (IE), I had to specify following CSS rules for the div with scrollbar:
overflow-x:scroll - This adds horizontal scrollbar
overflow-y:visible - This makes sure that vertical scrollbar is not added.
Hence in order to use difference CSS rules for IE and FireFox, I had to use the following:
* html #table_data {width:400px; overflow-x:scroll; overflow-y:visible; } - Adding asterisk and html before the appropriate class or ID, makes sure that this rule is rendered by Internet Explorer (IE) only. FireFox ignores this rule.
If you have any problem recreating a table such as above, please leave me a comment and I’ll try to explain.
December 31st, 2005 at 12:11 am
What happens if the text in the first column wraps? Does it skew the way the rest of the columns line up?
December 31st, 2005 at 8:32 am
The first column, i.e. the one that is frozen will be the heading column and so, you should be able to control the height and width of each cell in that column. So, if the text wraps and the height of that particular cell increases then you will have to adjust rest of the columns accordingly. You can see this in the above table (I’ve modified the above table to show this).
However, I do suggest declaring whitespace:nowrap style for the all the cells with data. This is because you do not have control over the length of the data and so, if the data wraps and increases the height of the cell then the columns will not line up.
May 1st, 2006 at 1:06 pm
Is there any way to freeze the first row as well? So, if I scroll down, the first header row would stay frozen as well?
Thanks,
Jeff
May 5th, 2006 at 2:37 pm
Dear Jeff,
I’ve tried freezing the first row but it doesn’t work. If you have any solution please let me know.
Shruti
March 24th, 2007 at 4:11 am
just what I was looking for, thanks !
ps. I had a vertical scrollbar in IE7
so I changed the last css line to:
#table_data {width:400px; overflow-y: auto; overflow-y: hidden; }
and now it works fine for firefox and IE7 !
August 14th, 2007 at 2:18 am
is there any way I can make the follwing example work in Mozilaa… Please let me know the same,
http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
April 23rd, 2008 at 3:13 pm
I need to freeze first as well as last column of a table. Is that possible?
April 24th, 2008 at 8:10 pm
I couldn’t freeze first as well as last column of a table.