When displaying data, the fixed header can have better readability.
1. Implementation method:
1. Define 2 tables, one absolute fixed
<div> <table cellpadding="0" cellpacing="0" id="table1"> <tr><th><div>Serial number</div></th><th><div>Store name</div></th>...</tr> <tr>...</tr> </table> </div> <div> <table cellpadding="0" cellpacing="0" id="fixed-table1"> </table> </div>
2. Copy Table 1<th> and insert Table 2
var th_new=$("#table1 tr").eq(0).clone(); $("#fixed-table1").append(th_new);3. Resize() method to get the <th> width of each column in Table 1 in real time
function trResize(){ $("#fixed-table1 th").each(function(){ var num=$(this).index(); var th_width=$("#table1 th").eq(num).width(); $(this).css("width",th_width+"px"); }); }4. The page is too small, the table is scrolled with the table header scrolling
$(".table1-wapper").scroll(function(){ var scroll=-$(this).scrollLeft() $(".fixed-table1-wapper").css("left",scroll+"px"); });2. Pay attention to the details:
1. Adaptive width, remove cell gaps:
<table cellpadding="0" cellpacing="0" ></table>
2. Table line:
If you directly add a border <td>, the edges will overlap; add attributes: border-collapse: collapse;
3. TD width:
Just control the width of the first line <td></td> / <td></td>
4. Different colors of odd and even rows:
css: #table1 tr:nth-child(2n){background-color:#ccc;} ie7 compatibility issue
jquery: $("#table1 tr:even").css("background-color","#ccc");
The following is the complete code:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Table organization</title> <link rel="stylesheet" type="text/css" href="css/basic.css"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css"> html{overflow:auto;} .table-wapper{width:100%;margin:30px auto;font-size:16px;position:relative;overflow:hidden;} .table1-wapper{height:200px;overflow-y:auto;} .table-wapper table{border:1px solid #f00;line-height:2;border-collapse: collapse;white-space:nowrap;} .table-wapper th{font-size:18px;font-weight:normal;background-color:#dbdbdb;} .table-wapper td{text-align:center;border:1px solid #f00;} .fixed-table1-wapper{position:absolute;top:0px;left:0px;background-color:#dbdbdb;} /*#table1 tr:nth-child(2n){background-color:#ccc;}*/ </style> </head> <body > <div> <div> <table cellpadding="0" cellpacing="0" id="table1"> <tr> <th>Serial number</th> <th>Stock name</th> <th>Stock code</th> <th>Transaction</th> <th>Flooding</th> <th>Flooding</th> <th>Turbishment</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Industry sector</th> </tr> <tr> <td>1</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>2</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>3</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>3</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>4</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>5</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>6</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>7</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>8</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>9</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> <tr> <td>10</td> <td>Bright Dairy</td> <td>600597</td> <td>15.2</td> <td>+6.23%</td> <td>0.12%</td> <td>Food and Beverage</td> </tr> </table> </div> <div> <table cellpadding="0" cellpacing="0" id="fixed-table1"> </table> </div> </div> <script type="text/javascript"> $(function(){<BR> $("#table1 tr:even").css("background-color","#ccc"); //Parity line color var inner_width=$("#table1").outerWidth(); $(".fixed-table1-wapper").css("width",inner_width+"px"); var th_new=$("#table1 tr").eq(0).clone(); $("#fixed-table1").append(th_new); }) $(window).resize(function(){ trResize(); }); $(".table1-wapper").scroll(function(){ var scroll=-$(this).scrollLeft() $(".fixed-table1-wapper").css("left",scroll+"px"); }); function trResize(){ var inner_width=$("#table1").outerWidth(); $(".fixed-table1-wapper").css("width",inner_width+"px"); $("#fixed-table1 th").each(function(){ var num=$(this).index(); var th_width=$("#table1 th").eq(num).width(); //console.log("th_width:"+th_width); $(this).css("width",th_width+"px"); }); } </script> </body> </html>The simple implementation of the fixed header of the above responsive form is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.