More on resizing html tables

Hi friends,

We have already discussed, how to resize html tables. This script is very nice but the common requirement is to fix the headers i.e. there should be only data scroll and fixed headers.
I have achieved this with help of another script available here.
In short, just put following style tag in your script,

<style>
/* This style tag contains classes for fixed headers */
body{
overflow:auto;
}

div.tableContainer {
position:absolute;
top:0;
left:0;
width:100%; /* table width will be 99% of this*/
height:100%; /* must be greater than tbody*/
overflow:auto;
}

table>tbody { /* only for mozilla - child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 550px;
overflow-x: hidden;
}

thead tr{
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}
</style>

Put your 'tablekit' table inside 'div'. My table looks like following,

<div class="tableContainer">
<table border="0" cellpadding="4" cellspacing="0" align="center" width="100%" class="tdata sortable resizable" id="table_top">
................
</table>
</div>

MOST IMPORTANT POINT, 'tablekit' table border MUST be zero. With a border, the headers are steady but keeps shaking when you scroll data ( test yourself :) ) You can always get the borders with style sheet, isn't it ? For the newbies, you can put a class like,

td.frame_data{
border-right:1px solid #f0f0ef;
border-bottom:1px solid #f0f0ef;
}

Happy coding :)

cya,
Sandeep

Comments

Post a Comment

Popular posts from this blog

Resize table columns of html table

Hi friends, I was replicating a desktop application in php. Everything was going fine but I was stuck at one of the requirements by client. He wanted column resize functionality just like we have in windows environment. User should be able to resize table cell width by dragging the separator between 2 columns. When I was looking for suitable solution on net, got a very robust one. Take a look at, http://www.millstream.com.au/view/code/tablekit/ It's not as powerful as the resize functionality in windows environment because of limitations in html table. The 100% width of table is maintained automatically. So, once you drag one column, other columns are resized. But still, this script is very much helpful. This script not only provides column resize functionality but also column sorting with a single click and that to without any additional code !! You just have to call respective class in the table and that's all !! You are ready to go. The column type can be specified so the so...
Read more

Compress file size in browser...... Just Like That !!

Hi there, While working on one of my projects, I came across one of the very useful tricks. It's about compressing file size in browser and believe me, the compression ratio is amazing !! Checkout yourself. I am going to discuss 'php' part of this. You'll find other counterparts on net. Just write ob_start("ob_gzhandler") as first line of your php script and you are done !! You can check the difference in file size by commenting the above code first in your php script. This will show your file's actual size in browser. Enable the first line again and see the magic !! To see file size in mozilla firefox browser, right click your mouse, select 'View Page Info' and see value next to 'Size' under 'General' tab. For techies out there, who really want to know, what's this and what goes on behind the scene, checkout http://www.whatsmyip.org/mod_gzip_test/phpgzip/ for details. If you are in doubt or don't how to check the file ...
Read more

AXIS bank complaint - refusal to issue FREE ATM card

Update (10 June 2023) For new visitors, please read full story below. Then, read "Update" sections. As expected, AXIS bank took U turn. It deducted Rs. 236 as annual debit card charges. I mailed  Principal Nodal Officer (PNO) as suggested in 2021. The response was, the charges are legitimate and cannot be reversed . I registered a complaint at  https://pgportal.gov.in/ This action forced AXIS bank not only to reverse the charges but also issue FREE ATM card without any further argument or excuse. However, it reversed only Rs. 200 initially. When I asked for remaining Rs. 36, response from PNO was,  The reversals has been processed excluding GST  and the said GST component cannot be reversed . An executive from home branch  (MIDC, Andheri(E.), Mumbai, Maharashtra) called and requested me to let go this amount. I refused. He tried to convince me for at least 10-15 mins. giving various excuses but I asked for full refund. After couple of days, I got credit of Rs. ...
Read more