By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,645 Members | 1,078 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,645 IT Pros & Developers. It's quick & easy.

Tables with fixed header and scrollable body

P: 2
Hi

Am working in project where i have to display a table with fixed header and the body is scrollable.I done this creating two tables and placing them inside a div.
I set the top property of header table with scrolltop value of the div.

The problem when i scroll the header is flickering.How to deal with that

Thanks
Binil
May 28 '07 #1
Share this Question
Share on Google+
2 Replies


acoder
Expert Mod 15k+
P: 16,027
Can you post some code or a link.
May 28 '07 #2

P: 2
<script language="javascript">
function fixheader()
{
document.getElementById("header").style.top = document.getElementById("cntnr").scrollTop;
}
</script>

<DIV id="cntnr" style="OVERFLOW: auto; WIDTH: 756px; HEIGHT: 336px;BACKGROUND-COLOR: AliceBlue;" onscroll="fixheader()">

<TABLE class="standard_text" id="header" border="1" style="WIDTH: 1093px; BORDER-COLLAPSE: collapse">
<tr style="COLOR: #ffffff; BACKGROUND-COLOR: #330099" align=center>
<th style="Width:123px">
Remote Type</th>
<th style="Width:180px">
Source</th>
<th style="Width:79px">
Total</th>
<th style="Width:79px">
Migrated</th>
<th style="Width:79px">
Active</th>
<th style="Width:79px">
Inactive</th>
<th style="Width:79px">
Not Migrated</th>
<th style="Width:79px">
Active</th>
<th style="Width:79px">
Inactive</th>
<th style="Width:79px">
Rejected</th>
<th style="Width:79px">
Active</th>
<th style="Width:79px">
Inactive</th>
</tr>
</TABLE>
<asp:Table style="BORDER-COLLAPSE: collapse;BACKGROUND-COLOR: AliceBlue;" runat="server" Width="1090px" CssClass="standard_text"
BorderWidth="1" GridLines="Both" >

<asp:TableRow>
<asp:TableCell style="Width:120px"></asp:TableCell>
<asp:TableCell style="Width:180px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
<asp:TableCell style="Width:79px"></asp:TableCell>
</asp:TableRow>
</asp:Table>
</DIV>

This is what i have done.The data in the <asp:table> is retrieved from DB
May 31 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.