0

I have implemented DIV based table header and body purposefully. I'm looking for the idea that if I scroll the horizontal scroll bar both table header and table body div's should get scroll together.

.wrapper {
  width: 200px;
}

table,
td,
th {
  border: 1px solid;
}

.dataTables_scrollHeadInner {
  width: 2000px;
}

.scroll-body thead {}

.scroll-head {
  overflow: hidden;
  position: relative;
  border: 0px;
  width: 100%;
}

.scroll-body {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 200px;
}

.scroll-body thead tr,
.scroll-body thead th {
  height: 0;
}
<div class="wrapper">
  <div class="scroll-head">
    <div class="dataTables_scrollHeadInner">
      <table style=" width: 2000px;">
        <thead>
          <tr>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
            <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <div class="scroll-body">
    <table>
      <thead>
        <tr>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
          <th aria-controls="dtHorizontalVerticalExample">Test1</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
        <tr>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>
          <td>Test1</td>

        </tr>
      </tbody>
    </table>
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
klmuralimohan
  • 861
  • 4
  • 23
  • 44
  • Is there a practical reason for separating the table headers in a different table which are in different divs? You'll probably run into many troubles of cell dimensioning, apart from your first problem with scrolling.. – Kaddath Aug 05 '19 at 12:50
  • Do u want vertical scrollbar or horizontal scrollbar? can u plz explain clearly? – Manikandan2811 Aug 05 '19 at 12:50
  • I want both scrollbars at the same time. But in my example horizontal data scrolling is not working. – klmuralimohan Aug 05 '19 at 12:53
  • It is best to keep whatever you need to scroll as a child (row) of the table so that when it scrolls, the row scrolls with it. Do not forget about `colspan` if you need the row's contents to be contained in a single element. – Stuyvenstein Aug 05 '19 at 13:01
  • 1
    If you don't tell us what the reason is, we can't help you efficiently, there are strong chances the reason you separated them in different divs is base on wrong assumptions. You can perfectly style table headers, bind to data table content without having to separate them, many other things – Kaddath Aug 05 '19 at 13:06
  • from a single table, it makes things sementicly correct and eventually easier to achievse. we could today use the grid system to override the table-layout system : https://codepen.io/gc-nomade/pen/WVXPNP display:contents might still be in the way for a crossbrowsers solution. or (not a duplicate but https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771 evntually a hint) . basicly, for a crossbrowser solution, you will need to use javascript to make it bulletproof. Browsers and CSS are still weak here on their owns. – G-Cyrillus Aug 05 '19 at 13:19
  • Here you can see the implementation https://mdbootstrap.com/docs/jquery/tables/scroll/.... wondering how they implemented without JS. – klmuralimohan Aug 05 '19 at 13:23
  • @klmuralimohan they do use javascript , look closer – G-Cyrillus Aug 05 '19 at 13:29

2 Answers2

0

Put the <thead> element inside the <table> element before the <tbody> element

edit:

  <table>
      <thead>
     <tr>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>

     </tr>
   </tbody>
   </table>
John
  • 536
  • 6
  • 18
0

See this code, I have added jquery with it to meet your requirements, also two additions in css code

$(document).ready(function(){     
      $('#table2').on('scroll', function() {
    $('#table1').scrollLeft($(this).scrollLeft());
  });
  
  });
.wrapper {
  width: 200px;
}
table, td, th {
  border: 1px solid;
}

.scroll-body thead {
  
}
.scroll-head {
      overflow: hidden;
    position: relative;
    border: 0px;
    width: 100%;
}

.scroll-body {
      position: relative;
    overflow: auto;
    width: 100%;
    height: 200px;
}

#table1
{ 
overflow: hidden;
    position: relative;
    border: 0px;
width: 200px;
  
  }
#table2{
  overflow: auto;
    position: relative;
    border: 0px;
   width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrapper">
<div class="scroll-head">
<div class= "dataTables_scrollHeadInner" id="table1">


   <table>
   <thead>
     <tr>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
       <th aria-controls="dtHorizontalVerticalExample">Test1</th>
     </tr>
   </thead>
   </table>
   </div>

</div>
<div class="scroll-body" id="table2">
   <table>
   
   <tbody>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
      <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr><tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
     <tr>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       <td>Test1</td>
       
     </tr>
   </tbody>
   </table>
</div>
</div>
Muhammad Asif
  • 456
  • 4
  • 10