如何用单滚动修复两个表头

Question

如何使用单个滚动条修复包含两个表格的标题？我有两个表格，我正在尝试修复表格标题，使其在使用单个滚动条滚动时可见。我怎样才能使它成为可能？ Here is my JSFiddle.

<div id="tablecontainer">
<table id="lefttable" style="width:120px">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th> 
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>   
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>

</div>

Answer 1

//test you code

 #lefttable {
  float: left;
  margin-right: 15px;
}
#lefttable, #righttable {
  padding-top: 15px;
  width: 200px;
}
#tablecontainer {
  height: 200px;
  overflow: scroll;
}
.fixed {
  border: 1px solid #FF0000;
  position: absolute;
  top: 0;
}
th, td {
  text-align: left;
}

  //test html

   <div id="tablecontainer">
         <table id="lefttable">
            <thead class="fixed">
               <tr>
                 <th>Firstname</th>
                <th>Lastname</th> 
                </tr>
            </thead>
          <tbody>
         <tr>
         <td>Eve</td>
         <td>Jackson</td> 
       </tr>
        <tr>
          <td>Eve</td>
           <td>Jackson</td> 
             </tr>   
             <tr>
                <td>Eve</td>
                <td>Jackson</td> 
             </tr>
             <tr>
                <td>Eve</td>
                  <td>Jackson</td> 
             </tr>
             <tr>
               <td>Eve</td>
               <td>Jackson</td> 
              </tr>
            <tr>
          <td>Eve</td>
         <td>Jackson</td> 
        <tr>
        <td>Eve</td>
            <td>Jackson</td> 
          </tr>
            <tr>
      <td>Eve</td>
         <td>Jackson</td> 
        </tr>
        <tr>
            <td>Eve</td>
          <td>Jackson</td> 
          </tr>    
            </tr>
         </tbody>
         </table>


          <table id="righttable">
            <thead class="fixed">
              <tr>
                 <th>Head1</th>
                 <th>Head2</th> 
                   <th>Head3</th>
                   <th>Head4</th> 
                 </tr>
                     </thead>
                     <tbody>
                  <tr>
                     <td>12</td>
                     <td>13</td>
                     <td>14</td>
                     <td>15</td> 
                   </tr>
                  <tr>
                      <td>12</td>
                       <td>13</td>
                       <td>14</td>
                      <td>15</td> 
                  </tr>   
                  <tr>
                    <td>12</td>
                    <td>13</td>
                     <td>14</td>
                      <td>15</td> 
                  </tr>


                </tbody>
                  </table>

               </div>

Answer 2

我修改了你的一些代码。

Demo JSFIDDLE

html

<div id="tablecontainer">
<table id="mytable">
<thead>
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>   
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>


<table id="mytable">
<thead>
<tr>
  <th>Head1</th>
  <th>Head2</th> 
  <th>Head3</th>
  <th>Head4</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>   
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
  <tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>    
</tr>
</tbody>
</table>

<table id="header-fixed"></table>
</div>

css

body { height: 1000px; }
#header-fixed { 
    display:none;
    position: fixed; 
    top: 0px; 
    background-color:white;
}
#mytable {
    float:left;
}
#header-fixed thead {
    float:left;
}

js

var tableOffset = $("#mytable").offset().top;
var $header = $("#mytable > thead").clone();

var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

Answer 3

我已经修改了你的小提琴，请检查一下..

Modified Fiddle

我为表头和正文使用了不同的表，并将滚动事件绑定到表体。

$("#tablebody").on("scroll",function(){})