Data display, the table head fixed, can have better readability.
First, the way to achieve:
1, the definition of 2 forms, a absolute fixed
<div class= "Table1-wapper" >
<table width= "100%" cellpadding= "0" cellspacing= "0" id= "table1" >
<tr><th><div> serial </div></th><th><div> stock name </div></th> .... </tr>
<tr>...</tr>
</table>
</div>
<div class= " Fixed-table1-wapper ">
<table width=" 100% "cellpadding=" 0 "cellspacing=" 0 "id=" fixed-table1 ">
</table>
</div>
2, table 1<th> Copy, and insert Table 2
var th_new=$ ("#table1 tr"). EQ (0). Clone ();
$ ("#fixed-table1"). Append (th_new);
3, Resize () method, real-time access to table 1 columns <th> width
function Trresize () {
$ ("#fixed-table1st"). each (the function () {
var num=$ (this). index ()
; var th_width=$ ("#table1st"). EQ (num). width ();
$ (this). CSS ("width", th_width+ "px");}
4, page over the hour, table scrolling with Table head scrolling
$ (". Table1-wapper"). Scroll (function () {
var scroll=-$ (this). ScrollLeft ()
$ (". Fixed-table1-wapper"). CSS ( "Left", scroll+ "px");
Second, attention to detail:
1, Width adaptive, remove cell gap:
<table width= "100%" cellpadding= "0" cellspacing= "0" ></table>
2, form line:
Direct <td> add border, there will be line overlap; add attributes: Border-collapse:collapse;
3, TD width:
Control the first line width <td width= ></td>/<td width= "20%" ></td>
4, odd and even line color different:
CSS: #table1 tr:nth-child (2n) {background-color: #ccc;} IE7 compatibility issues
jquery: $ ("#table1 Tr:even"). CSS ("Background-color", "#ccc");
The following is the complete code:
<!doctype html>
The above response form of the fixed header simple implementation is a small set to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.
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
