Table table header in HTML fixed table data row appears scroll bar

First, business needs

Some users in the web system do not like paging, hoping that the data can be displayed in a single page.

But there are scroll bars in the page, and when you look at the data below, you don't know which header column corresponds to the column in the data row.

That is, there is no way to know what data this column is.

So, I want the table title fixed, and the data row in the data too much when the scroll bar appears, so more humane.

Second, JS method (need and three, the page div and table layout supporting use. The Div and table IDs have been specified)

Note: With this method, jquery is required.

1 /*2 * Purpose: Handle header fixed, table data row scroll bar, two table column alignment problem3 //tbtitle as Title table4 //tbdata for data table5 //fisrtcolwidth To customize the width of the first column (can be empty, no value specified)6 */7 functiontableverticalalignment (fisrtcolwidth) {8     //Reset the div width where the titletable is located9$ ("#divTableTitle"). Width ($ ("#divData"). width ());Ten  One     varTbtitle_width = $ ("#tbTitle tr:first th"). length; A     //the width of the first column of the header row, custom. Currently, pixels are used.  -     if(Fisrtcolwidth! = "" && fisrtcolwidth! =NULL&& Fisrtcolwidth! =undefined) { -$ ("#tbTitle tr:first th"). EQ (0). Width (fisrtcolwidth); the     } -      for(i = 0; i < tbtitle_width; i++) { -$ ("#tbData Tr:first TD"). EQ (i). Width ($ ("#tbTitle tr:first th"). EQ (i). Width ()) -     } +}

View Code

Iii. div and table layouts in the page

1. Tables obtained using AJAX (native HTML code)

1 //layout of Div and table in page2<div class= "xliebai_i" id= "Divtabletitle" >3<table width= "100%" cellspacing= "0" cellpadding= "0" class= "Xliebai_u" id= "Tbtitle" >4<thead>5<tr>6<th>7 name8</th>9</tr>Ten</thead> One</table> A</div> -<div class= "xliebai_i" style= "height:300px; Overflow:auto; "id=" Divtabledata "> -<div id= "Divdata" > the<table width= "100%" cellspacing= "0" cellpadding= "0" class= "Xliebai_u" id= "Tbdata" > -<tr> -<td> - Li Bai +</td> -</tr> +</table> A</div> at</div>

View Code

2. Using the Repeater control to bind the value

1<div id= "Divtabletitle" >2<table id= "Tbtitle" width= "100%" class= "Table2" >3<tr>4<th style= "width:5%" >5 Serial Number6</th>7<th style= "width:10%" >8 name9</th>Ten<th style= "width:8%" > One number of early stages A</th> -</tr> -</table> the</div> -<div id= "Divtabledata" style= "height:300px; Overflow:auto "> -<div id= "Divdata" > -<table width= "100%" id= "Tbdata" class= "table2 table table-striped table-bordered table-hover" > +<asp:repeater id= "rptdatalist" runat= "Server" > -<ItemTemplate> +&LT;TR class= "Light" > A&LT;TD align= "center" > at<%# Eval ("Dgno")%> -</td> -&LT;TD align= "center" > -<%# Eval ("Dgname")%> -</td> -&LT;TD align= "center" > in<%# Eval ("Beginningnum", "{0:F2}")%> -</td> to</tr> +</ItemTemplate> -<AlternatingItemTemplate> the<tr class= "Gridrowalt Light" > *&LT;TD align= "center" > $<%# Eval ("Dgno")%>Panax Notoginseng</td> -&LT;TD align= "center" > the<%# Eval ("Dgname")%> +</td> A&LT;TD align= "center" > the<%# Eval ("Beginningnum", "{0:F2}")%> +</td> -</tr> $</AlternatingItemTemplate> $<FooterTemplate> -<tr id= "TR1" runat= "server" visible= ' <% #bool. Parse ((rptdatalist.items.count==0). ToString ())%> ' > -&LT;TD colspan= "3" align= "Center" > the<asp:label id= "Lblinfo" runat= "Server" text= "no Data" ></asp:Label> -</td>Wuyi</tr> the</FooterTemplate> -</asp:Repeater> Wu</table> -</div> About</div>

View Code

Table table header in HTML fixed table data row appears scroll bar