Use CSS and Div to create a horizontal and vertical scroll bar for a table and fix the specified column. The Code is as follows.
<HTML>
<Head>
<Title> </title>
<Style type = "text/CSS">
. Freezing {
Z-index: 10;
Position: relative;
Top: expression (this. offsetparent. scrolltop)
}
. Freezingcol {
Z-index: 1;
Left: expression (document. getelementbyid ("freezingdiv"). scrollleft );
Position: relative
}
</Style>
</Head>
<Body>
<Div id = "freezingdiv" style = "overflow: auto; width: 400px; Height: 155px">
<Table cellspacing = "0" cellpadding = "4" rules = "all" bordercolor = "# 3366cc" border = "1" id = "datagrid1" style = "background-color: white; border-color: # 3366cc; border-width: 1px; border-style: none; width: 900px; border-collapse: collapse; ">
<Tr class = "freezing" style = "color: # ccccff; Background-color: #003399; font-weight: bold;">
<TD class = "freezingcol"> id </TD>
<TD class = "freezingcol"> name </TD>
<TD> age </TD>
<TD> phone number </TD>
<TD> gender </TD>
<TD> address </TD>
</Tr>
<Tr style = "color: #003399; Background-color: White;">
<TD class = "freezingcol">
<Span> 1 </span>
</TD>
<TD class = "freezingcol">
<Span> zhangsan </span>
</TD>
<TD> 29 </TD>
<TD> 0000000000000 </TD>
<TD> male </TD>
<TD> Beijing </TD>
</Tr>
<Tr style = "color: #003399; Background-color: White;">
<TD class = "freezingcol">
<Span> 1 </span>
</TD>
<TD class = "freezingcol">
<Span> Li Si </span>
</TD>
<TD> 29 </TD>
<TD> 0000000000000 </TD>
<TD> male </TD>
<TD> Shanghai </TD>
</Tr>
<Tr style = "color: #003399; Background-color: White;">
<TD class = "freezingcol">
<Span> 1 </span>
</TD>
<TD class = "freezingcol">
<Span> Wang Wu </span>
</TD>
<TD> 50 </TD>
<TD> 0000000000000 </TD>
<TD> male </TD>
<TD> Shanghai </TD>
</Tr>
<Tr style = "color: #003399; Background-color: White;">
<TD class = "freezingcol">
<Span> 1 </span>
</TD>
<TD class = "freezingcol">
<Span> Zhao Liu </span>
</TD>
<TD> 29 </TD>
<TD> 0000000000000 </TD>
<TD> male </TD>
<TD> Shanghai </TD>
</Tr>
<Tr style = "color: #003399; Background-color: White;">
<TD class = "freezingcol">
<Span> 1 </span>
</TD>
<TD class = "freezingcol">
<Span> Zhao QI </span>
</TD>
<TD> 29 </TD>
<TD> 0000000000000 </TD>
<TD> male </TD>
<TD> Shanghai </TD>
</Tr>
</Table>
</Div>
</Body>
</Html>
This method is slow when you drag the page scroll bar when there is a lot of data.
From: http://blog.csdn.net/xuyusong/article/details/6618847
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
