ASP.net achieves two-Table synchronization scaling without deformation

There is a table in the project that needs to display data, especially in. The data department of the table needs to scroll on this page, but the title does not move.

The implementation is very simple. Two table controls are combined to display the data title and data, and the data table is nested in the DIV to implement scrolling. In this way, the requirements are basically met.

However, the table columns on this page cannot be invariably controlled by, so that you can keep the upper and lower table alignment in a timely manner during design, however, when the IE form is not stretched, the upper and lower tables cannot be scaled synchronously, resulting in deformation of the entire table.

Is the table showing data

 

In the end, the thought is to put both the upper and lower tables in the DIV and set the upper and lower scroll bars, however, the DIV scroll bar in the title uses style form control to make it consistent with the page color (both white ). In this way, the two tables are scaled and synchronized regardless of how the page is stretched.
The following is the implementation code: (the key is in the first line of the Code)
1 <div style = "height: 13px; overFlow-y: scroll; SCROLLBAR-HIGHLIGHT-COLOR: # FFF; SCROLLBAR-DARKSHADOW-COLOR: # FFF; SCROLLBAR-ARROW-COLOR: # FFF; SCROLLBAR-TRACK-COLOR: # FFF; SCROLLBAR-FACE-COLOR: # FFF; SCROLLBAR-SHADOW-COLOR: # FFF; SCROLLBAR-3DLIGHT-COLOR: # FFF; ">
2 <asp: table id = "tbl_title" runat = "server" width = "100%" borderwidth = "1px" cellspacing = "0"
3 cellpadding = "0">
4 <asp: tableRow verticalalign = "Middle" borderwidth = "1px" horizontalalign = "Center" forecolor = "Black" backcolor = "LightCyan" font-size = "Smaller" font-bold = "True">
5 <asp: TableCell borderwidth = "1px" width = "10%" text = "column 1"> </asp: TableCell>
6 <asp: TableCell borderwidth = "1px" width = "30%" text = "column 2"> </asp: TableCell>
7 <asp: TableCell borderwidth = "1px" width = "10%" text = "column 3"> </asp: TableCell>
8 <asp: TableCell borderwidth = "1px" width = "10%" text = "column 4"> </asp: TableCell>
9 <asp: TableCell borderwidth = "1px" width = "30%" text = "column 5"> </asp: TableCell>
10 <asp: TableCell borderwidth = "1px" width = "10%" text = "column 6"> </asp: TableCell>
11 </asp: TableRow>
12 </asp: table>
13 </div>
14 <div id = "divDetail" style = "height: 290px; overFlow-y: scroll;">
15 <asp: table id = "tblResult" runat = "server" width = "100%" borderwidth = "1px" cellspacing = "0"
16 cellpadding = "0">
17 </asp: table>
18 </div>

 
Haha! The method is too stupid, but the desired effect has come out. You are welcome to make a brick!

 

From Dongdong blog