Table fixed header: Should move when scrolling horizontally

Question

I have a serious problem which I can't solve and I hope you can help me out.. So I have a table with a fixed header on vertical scroll (CSS and Javascript down below) but my Header isn't moving when I scroll horizontally..

    window.onscroll = function() {myFunction()};
                var header = document.getElementById('myHeader');
                var sticky = header.offsetTop;
                function myFunction() {
                    if (window.pageYOffset > sticky) {
                        header.classList.add('sticky');
                    } else {
                        header.classList.remove('sticky');
                    }
                }

    .sticky {
                  position: fixed;
                  top: 0;
                  z-index:1000;
                  padding-left:62px;
                  overflow-x: scroll;
                }

    
    <table id='table' class='display cell-border'>  
                    <thead class='head' id='myHeader'>
                        <tr>
                            <th class='noSearch'></th>
                            <th class='noSearch'></th>
                            <th>Shell ID</th>
                            <th>Package ID</th>
                            <th>Package Title</th>
                            <th>Product Type</th>
                            <th>Project</th>
                            <th>Current Phase</th>
                            <th>Status</th>
                        </tr>
</thead>
    <tr>
    <td>Shell ID</td>
                            <td>Package ID</td>
                            <td>Package Title</td>
                            <td>Product Type</td>
                            <td>Project</td>
                            <td>Current Phase</td>
                            <td>Status</td>
                    </tr>
          </table>

I hope you can help me out.. Cheers

check this post https://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on — Arun Kumar, Oct 04 '18 at 07:29
What browsers do you need to support is `position: sticky`an option ? — anderssonola, Oct 04 '18 at 07:29
what do you mean `Header isn't moving when I scroll horizontally..`? — לבני מלכה, Oct 04 '18 at 08:01
So my Header is fixed when I am Scrolling up and down (fine!) but when I want to scroll from left to right, my Header isn't moving with the table (is just fixed and I can't the the collumns from the right side of my table) — Mert Silva, Oct 04 '18 at 08:09
please close `` see here:https://jsfiddle.net/gL3xtdkw/embedded/result,css,html,js — לבני מלכה, Oct 04 '18 at 08:18

score 0 · Answer 1 · answered Oct 04 '18 at 08:04

Try this method: https://codepen.io/anon/pen/vVGeVM

<!------------------------------Css-------------------->
.tableContainer{
  overflow: auto;
  height:100px;
}
td, th{
  width:80px;
  text-align:center;
}
<!------------------------html-------------------------->

<table id='table' class='display cell-border'>  
    <thead class='head' id='myHeader'>
            <tr>
                <th class='noSearch'></th>
                <th class='noSearch'></th>
                <th>Shell ID</th>
                <th>Package ID</th>
                <th>Package Title</th>
                <th>Product Type</th>
                <th>Project</th>
                <th>Current Phase</th>
                <th>Status</th>
             <tr>
 </thead>
 <tbody>
   <tr>
    <td colspan="12">
      <div class="tableContainer">
        <table>
          <tr>
            <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
             <td>test</td>
          </tr>
        </table>
      </div>
     </td>
   </tr>
 </tbody>
</table>

score -2 · Answer 2 · answered Oct 04 '18 at 07:14

-2

Please use fixed header dataTable it will fix your problem. https://datatables.net/extensions/fixedheader/examples/options/simple.html

answered Oct 04 '18 at 07:14

Subodh Sharma

303
3
9

why, he's not asking for plugin tips ? – anderssonola Oct 04 '18 at 07:18
So I'm working with DataTables but the fixed Header plugin doesn't work with Ajax and I am working for my own solution.. – Mert Silva Oct 04 '18 at 07:24

score -2 · Answer 3 · answered Oct 04 '18 at 07:44

-2

according to you problem it seems that you should not use window.onScroll event left this behaviour upon css. it can handle it.

   .sticky {
          position: fixed;
          top: 0;
          z-index:100;
        }

and put this property in headers parent element

 #table{
 overflow: auto; 
}

answered Oct 04 '18 at 07:44

md.warish Ansari

137
3

Tried it, doesn't work... There's a scrollbar now underneeth my Header, which I don't want to see (just the scrollbar under my table is necessary). – Mert Silva Oct 04 '18 at 07:50

Table fixed header: Should move when scrolling horizontally

3 Answers3