CODEWITHSUNDEEP
jqueryhtmlcss
kannan D.S
kannan D.S

Reputation: 1101

How to fix two-table header with single scroll

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>

Upvotes: 2

Views: 1707

Answers (3)

Kisspa
Kisspa

Reputation: 584

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

Upvotes: 0

Smith Foto
Smith Foto

Reputation: 159

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

Upvotes: 1

Madhu
Madhu

Reputation: 2551

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

Upvotes: 0

Related Questions