How to fix two-table header with single scroll

Question

How can I fix a two-table header with a single scroll bar? I have two tables, and I am trying to fix the table header to be visible while scrolling using a single scroll bar. How can I make it possible? 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>

Is this what you want: http://stackoverflow.com/questions/7335444/css-disabled-scrolling — a coder, May 28 '14 at 04:45
position fixed not bossible in my case because my table is dynamic — kannan D.S, May 28 '14 at 04:48
http://stackoverflow.com/questions/19559197/how-to-make-scrollable-table-with-fixed-headers-using-css — Ehsan Sajjad, May 28 '14 at 04:48
please check my fiddle two tables there and iam trying to fix both table header with single scroll. — kannan D.S, May 28 '14 at 04:50
you can pace head in a div with table teg and row in seperate div with table tag to make it work — Ehsan Sajjad, May 28 '14 at 04:59
edit my fiddle please http://jsfiddle.net/kannankds/2yvj3/7/ — kannan D.S, May 28 '14 at 05:02

score 1 · Accepted Answer · answered May 28 '14 at 07:25

i have modified some code of yours.

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();
    }
});

clone looks good.But in my case first time table header is not showing, scroll time clone div shows. — kannan D.S, May 31 '14 at 04:17

score 0 · Answer 2 · answered May 28 '14 at 06:01

0

I have modified your fiddle please check it..

Modified Fiddle

I have used different table for header and body and bind the scroll event to the table body.

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

answered May 28 '14 at 06:01

Madhu

2,416
3
15
33

score 0 · Answer 3 · answered May 28 '14 at 11:56

//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>

How to fix two-table header with single scroll

3 Answers3

html

css

js