Using js+css+html to realize the _javascript technique of fixed table's column head

Don't say a word, let's see it with this little weave.

1, CSS

<style type= "Text/css" >
  #scroll_head {
    position:absolute;
    Display:none;
  }
</style>

2. Javascript

<script type= "Text/javascript" >//The function calls///sets the width of the header to the header to scroll to the left of the page after a table data loading is completed the var copywidth = function () {
    var B = $ (' #data_tbody '). Prev (). Find (' Tr:last '). Find (' th ');
    var c = $ (' #scroll_head '). Find (' Tr:last '). Find (' th ');
      for (var i = 0; i < b.length i++) {var newwith = B.eq (i). width ();
      if ($.browser.msie) {newwith = 1;
    C.eq (i). width (newwith);  } $ (function () {$ (window). Scroll (function () {if ($ (' #data_tbody '). Length > 0) {var thead =
        $ (' #data_tbody '). Prev ();
        var thoffset = Thead.offset (); var sctop = $ (window). scrolltop (); The position of the scroll bar relative to top if (Sctop > Thoffset.top) {//scroll bar to thead and below, replace the display $ (' #scroll_head ') with a temporary thead. css (' di
          Splay ', ' block ');
        $ (' #scroll_head '). Offset ({top:sctop, left:thOffset.left});
        else {//scroll bar to the position on the THEAD, display $ (' #scroll_head ') with the original thead of the table. CSS (' Display ', ' none ');
  }
      }
    });
});</script>
 

3, HTML content

<div id= "Data_div" > <table> @*thead content and style with Scroll_head thead*@ use a deep background color to avoid scrolling and @*thead content overlay display Tbody <thead> <tr> @* title *@ <th class= "Tt1" colspan= "2" > First level 1</th> <th
      class= "Tt2" colspan= "5" > Level 2</th> <th class= "Tt3" colspan= "6" > Level 3</th> </tr> <tr> @* Level Two title *@ <th style= "WIDTH:23PX;" > Level two 11</th> <th style= "WIDTH:36PX;" > Level two 12</th> <th class= "tt" style= "width:40px;" > Level two 21</th> <th class= "tt" style= "width:30px;" > Level two 22</th> <th class= "tt" style= "width:30px;" > Level two 23</th> <th class= "tt" style= "width:30px;" > Level two 23</th> <th class= "tt" style= "width:30px;" > Level two 24</th> <th class= "tt" style= "width:30px;" > Level two 25</th> <th class= "tt" style= "width:30px;" > Level two 31</th> <th class= "tt" style= "width:30px; " > Level two 32</th> <th class= "tt" style= "width:30px;" > Level two 33</th> <th class= "tt" style= "width:30px;" > Level two 33</th> <th class= "tt" style= "width:30px;" > Level two 34</th> <th class= "tt" style= "width:30px;" > Level two 35</th> <th class= "tt" style= "width:30px;" > Level two 36</th> </tr> </thead> <tbody id= "data_tbody" > Data content, call Copywidth after data loading is complete ( ) function to resolve compatibility </tbody> </table> </div> <div id= "Scroll_head" style= display:block; top:168px; left:0px; position:relative; "
        > <table width= "100%" > <thead> @*thead use a deep background color to avoid scrolling and tbody content overlay display *@ <tr> @* level headings *@ <th class= "Tt1" colspan= "2" > Level 1</th> <th class= "Tt2" colspan= "5" > Level 2</th> &L t;th class= "Tt3" colspan= "6" > Level 3</th> </tr> <tr> @* two level title *@ <th style= "W idth:23px; " > Level Two 11</th> <th style= "WIDTH:36PX;" > Level two 12</th> <th class= "tt" style= "width:40px;" > Level two 21</th> <th class= "tt" style= "width:30px;" > Level two 22</th> <th class= "tt" style= "width:30px;" > Level two 23</th> <th class= "tt" style= "width:30px;" > Level two 23</th> <th class= "tt" style= "width:30px;" > Level two 24</th> <th class= "tt" style= "width:30px;" > Level two 25</th> <th class= "tt" style= "width:30px;" > Level two 31</th> <th class= "tt" style= "width:30px;" > Level two 32</th> <th class= "tt" style= "width:30px;" > Level two 33</th> <th class= "tt" style= "width:30px;" > Level two 33</th> <th class= "tt" style= "width:30px;" > Level two 34</th> <th class= "tt" style= "width:30px;" > Level two 35</th> <th class= "tt" style= "width:30px;"
 > Level two 36</th> </tr> </thead> </table> </div>

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if there are questions you can message exchange, but also hope that a lot of support cloud Habitat community!