bootstrap table 实现固定悬浮table 表头并可以水平滚动(转)

在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3，故也可以叫做bootstrap table。

需要实现的是：表格头部固定，并且支持水平滚动

html code(source table):

<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
    <thead>
        <tr id="table_head">
             <td>Test</td>
             ....
        </tr>
    </thead>
   <tbody>

   </tbody>
</table>

stylesheet code:

#fixed_table #fix_head{
    background: #FFFFFF;
    box-shadow: 0px 0px 5px #888888;
}

 

JS代码按效果不同有一些不同

效果一 是浏览器滚动条滚动，头部固定:

HTML、CSS、JS

<h3>Out</h3>
<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
    <thead>
      <tr id="table_head"><td>Test0</td><td>Test1</td><td>Test2</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td><td>Test7</td><td>Test8</td><td>Test9</td><td>Test10</td><td>Test11</td><td>Test12</td><td>Test13</td><td>Test14</td><td>Test15</td><td>Test16</td><td>Test17</td><td>Test18</td><td>Test19</td><td>Test20</td><td>Test21</td><td>Test22</td><td>Test23</td><td>Test24</td><td>Test25</td><td>Test26</td><td>Test27</td><td>Test28</td><td>Test29</td></tr>
    </thead>
   <tbody>
    <tr><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td></tr><tr><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td></tr><tr><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td></tr><tr><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td></tr><tr><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td></tr><tr><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td></tr><tr><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td></tr><tr><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td></tr><tr><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td></tr><tr><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td></tr><tr><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td></tr><tr><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td></tr><tr><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td></tr><tr><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td></tr><tr><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td></tr><tr><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td></tr><tr><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td></tr><tr><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td></tr><tr><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td></tr><tr><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td></tr><tr><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td></tr><tr><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td></tr><tr><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td></tr><tr><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td></tr><tr><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td></tr><tr><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td></tr><tr><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td></tr><tr><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td></tr><tr><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td></tr><tr><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td></tr>

   </tbody>
</table>

#fixed_table #fix_head{
    background: #FFFFFF;
    box-shadow: 0px 0px 5px #888888;
}

$(function(){
  var sourceTable = $("#top_fix_table");//table id
  var sourceTableHead = $("#table_head");//table thead tr id
  var headHeight = sourceTableHead.height();//table thead tr height
  var sourceTableWidth = sourceTable.outerWidth(); //get source table width
  //copy table and thead html tag from source table,
  $('body').append('<div id="shelter"><table id="fixed_table"  border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead></thead></table></div>');
  //only set top and left,beacuse i need the top bar can scroll left
  $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'0'});
  //set target table width equal source table width
  $("#fixed_table").css({'width':sourceTableWidth+"px"});

  //only clone tr html and change thead tr id attr
  var targetHead = sourceTableHead.clone().attr('id','fix_head');
  targetHead.appendTo('#fixed_table thead');
  //mark target table thead td width,height equal source table thead td width,height
  $("#table_head td").each(function(index,value){
    var tempWidth = $(value).outerWidth();
    var tempHeight = $(value).outerHeight();
    $("#fixed_table td").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
  });
  $("#shelter").hide();
  $(window).scroll(function(){
    //scroll left method
     var sl=-Math.max($('body').scrollLeft(),$('document').scrollLeft());
    if(isNaN(sl)){
      sl = - $(window).scrollLeft();
    }
    console.log(sl);
     $('#shelter').css("left",sl+'px');
    var scroll_top = $('body').scrollTop() - sourceTable.offset().top;
    //control  show or hide
    if (scroll_top > 0) {
      $('#shelter').show();
    }else {
      $('#shelter').hide();
    }
  });

});

 

效果二 内容内部滚动，固定表格头部。js,html是基于效果一，Html,js,css 代码相对效果一有增加。

HTML、CSS、JS

<h3>Content Scroll Fix table header</h3>
<div class="scroll_table_content" id="scroll_wrap">
<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
    <thead>
      <tr id="table_head"><td>Test0</td><td>Test1</td><td>Test2</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td><td>Test7</td><td>Test8</td><td>Test9</td><td>Test10</td><td>Test11</td><td>Test12</td><td>Test13</td><td>Test14</td><td>Test15</td><td>Test16</td><td>Test17</td><td>Test18</td><td>Test19</td><td>Test20</td><td>Test21</td><td>Test22</td><td>Test23</td><td>Test24</td><td>Test25</td><td>Test26</td><td>Test27</td><td>Test28</td><td>Test29</td></tr>
    </thead>
   <tbody>
    <tr><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td><td>content1</td></tr><tr><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td><td>content2</td></tr><tr><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td><td>content3</td></tr><tr><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td><td>content4</td></tr><tr><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td><td>content5</td></tr><tr><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td><td>content6</td></tr><tr><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td><td>content7</td></tr><tr><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td><td>content8</td></tr><tr><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td><td>content9</td></tr><tr><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td><td>content10</td></tr><tr><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td><td>content11</td></tr><tr><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td><td>content12</td></tr><tr><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td><td>content13</td></tr><tr><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td><td>content14</td></tr><tr><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td><td>content15</td></tr><tr><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td><td>content16</td></tr><tr><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td><td>content17</td></tr><tr><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td><td>content18</td></tr><tr><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td><td>content19</td></tr><tr><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td><td>content20</td></tr><tr><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td><td>content21</td></tr><tr><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td><td>content22</td></tr><tr><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td><td>content23</td></tr><tr><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td><td>content24</td></tr><tr><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td><td>content25</td></tr><tr><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td><td>content26</td></tr><tr><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td><td>content27</td></tr><tr><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td><td>content28</td></tr><tr><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td><td>content29</td></tr><tr><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td><td>content30</td></tr>

   </tbody>
</table>
  
  <div id="test_width"></div>
  <!--Test width div, @link http://stackoverflow.com/a/10692895 -->
</div>
<!--/content scroll wrapper-->

#shelter{
    box-shadow: 0px 3px 5px #888888;
}
#fixed_table #fix_head{
    background: #FFFFFF;
    
}
#fixed_table{
    position: absolute;
    top: 0px;
    left: 0px;
    table-layout:fixed;
}
.scroll_table_content{
    width:100%; 
    height:600px;
    overflow:auto;
}

$(function(){
    var sourceTable = $("#top_fix_table");//table id
  var sourceTableHeight = sourceTable.height();

  var sourceTableHead = $("#table_head");//table thead tr id
  var headHeight = sourceTableHead.height();//table thead tr height
  var sourceTableWidth = sourceTable.outerWidth(); //get source table width
  var testDiv = $("#test_width"); //測試獲取內容寬度
  var wrapDiv = $("#scroll_wrap"); //滾動條外層div，用於獲取div距離頭部的距離
  var tempTop = wrapDiv.offset().top - $(window).scrollTop(); //滾動頭部距離網頁頂部的距離
  //copy table and thead html tag from source table,
  $('body').append('<div id="shelter"><div id="fixed_table_wrap"><table id="fixed_table"  border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead></thead></table></div></div>');
  var fixTopDiv = $("#shelter");
  fixTopDiv.hide();
  //only set top and left,beacuse i need the top bar can scroll left
  fixTopDiv.css({
    'height':headHeight,
    'position':'fixed',
    'top':tempTop+"px",
    'left':'0',
    'width':testDiv.width()+"px",
    'overflow':'hidden'
    });
  //set target table width equal source table width
  $("#fixed_table_wrap,#fixed_table").css({'width':sourceTableWidth+"px"});

  //only clone tr html and change thead tr id attr
  var targetHead = sourceTableHead.clone().attr('id','fix_head');
  targetHead.appendTo('#fixed_table thead');
  //mark target table thead td width,height equal source table thead td width,height
  $("#table_head td").each(function(index,value){
    var tempWidth = $(value).outerWidth();
    var tempHeight = $(value).outerHeight();
    $("#fixed_table td").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
  });

  //Div中內容滾動
  wrapDiv.scroll(function(){
    //scroll left method
    var sl=-Math.max(wrapDiv.scrollLeft(),$('document').scrollLeft());
    if(isNaN(sl)){
      sl = - wrapDiv.scrollLeft();
    }
    fixTopDiv.css("left",sl+'px');
    var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
    tempTop = wrapDiv.offset().top - $(window).scrollTop();
    if(tempTop <= 0){
      tempTop = 0;
    }
    var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
    //control  show or hide
    if (scroll_top >= 0) {
      fixTopDiv.css({'top':tempTop +"px",'width':baseWidth+"px"});
      if(!fixTopDiv.is(':visible')){
        fixTopDiv.show();
      }
    }else {
      if(fixTopDiv.is(':visible')){
        fixTopDiv.hide();
      }
     
    }
  });

//瀏覽器srcoll
$(window).on('scroll',function(){
  tempTop = wrapDiv.offset().top - $(window).scrollTop();
  var scroll_top = wrapDiv.scrollTop() - headHeight + $(window).scrollTop();
  var baseWidth = testDiv.width() + wrapDiv.scrollLeft();
  if(tempTop <= 0){
    tempTop = 0;
  }
  console.log(scroll_top);
  fixTopDiv.css({'top':tempTop +"px",'width':baseWidth+"px"});
  //control  show or hide
    if (scroll_top >= 0) {
      if(!fixTopDiv.is(':visible')){
        fixTopDiv.show();
      }
    }else {
      if(fixTopDiv.is(':visible')){
        fixTopDiv.hide();
      }
    }
});

});

 

 

附生成 codepen.io中table thead和tbody 内容的php code:

<?php
$count = 30;

echo '<tr id="table_head">';
for($i=0;$i<$count;$i++){
    echo "<td>Test{$i}</td>";
}
echo '</tr>';

echo "content trs---------------\r\n";

$content_count = 30;
for($i = 0; $i < $content_count;$i++){
    echo '<tr>';
    for($j = 0;$j < $count;$j++){
        echo "<td>content".($i+1)."</td>";
    }
    echo '</tr>';
}

如果当前电脑没有PHP运行环境，可以百度: php代码在线运行 ，点击进入搜索结果列表的一个，然后将php代码复制进代码输入框中，运行之后应该就可以看到生成的有tr td 内容的字符串。

 

参考文档：

1. css position:fixed时还能水平滚动，如何实现    实现了固定头部的水平滚动
2. 网页制作中在头部固定悬浮table表头(thead)的方法  javascript 主要代码来源
3. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度  学习获取元素实际宽度
4. firefox下table固定寬度  解决Firefox浏览器下table宽度不识别
5. how to get innerWidth of an element in jquery WITHOUT scrollbar 效果二中，需要实现 滚定头部不遮住内容滚动条，所以需要设定宽度。笔者是按照回答得到思路，笔者偷懒直接加一个div，直接获取这个div的宽度，就获取内容区的宽度了。

 

转自：https://www.cnblogs.com/fsong/p/6818158.html