Position Sticky for table headers with horizontal scroll

Asked 19/2, 2021 at 12:50 Answered 19/2, 2021 at 13:21

I have a HTML table which is scrollable horizontally but not vertically

I want to fix the Header of the table to top as you scroll down but when i use position:sticky on the element along with overflow-x:scroll on the parent it doesn't stick.

here is an example fiddle of the problem https://jsfiddle.net/a53exv28/8/

Harvey answered 19/2, 2021 at 12:50 Comment(4)

why using overflow-x:scroll when it works perfectly without it? – Agglutinogen 19/2, 2021 at 13:9

Overflow-x is needed because the amount of columns in the actual table I want to implement is around 20 or so and I can't just show those columns across the page as it would take a lot more space than view width. And I can't specify height and make it scroll along y axis because the table should be able to take in more data dynamically using FE frameworks like vue. – Harvey 19/2, 2021 at 20:39

Still Overflow-x is not needed. TBH is a property that I have never used and never will. When you remove it, your container will have overflow:auto by default so any time your table is bigger than the container you'll have the scroll you need... as you can check in your jsfiddle removing the property. This is anyway my last comment in this question... when I see comments from people looking for help saying "Overflow-x is needed" trying to "explain" how it works... It is obvious they are not open minded to actually get any help at all. GL with your project. – Agglutinogen 19/2, 2021 at 21:53

@AlvaroMenéndez Sorry if i came out rude to you i was just trying to explain that table keeps on overflowing outside the div if you remove that. I tried what u suggested in fiddle the sticky header works but the table isn't scrollable x-axis. If u replace it with overflow:auto it will add scroll but the problem with header not sticking still persists though. – Harvey 20/2, 2021 at 6:39

-1

please check my snippet, i did it with position sticky also u need to specify wrapper div height and set scroll-y property to scroll. check below code for reference.

<!DOCTYPE html>
<html>

<head>
  <title>data table demo</title>
  <style type="text/css">
    body {
      padding: 0px;
      margin: 0px;
    }
    
    .fixed-table-wrap {
      display: block;
      width: 100%;
      overflow-x: auto;
      overflow-y: scroll;
      height: calc(100vh);
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .fixed-table-wrap table {
      border-collapse: collapse;
    }
    
    .fixed-table-wrap table th,
    .fixed-table-wrap table td {
      padding: 10px;
      border: 1px solid #c3c3c3;
    }
    
    .fixed-table-wrap table th {
      position: sticky;
      position: -webkit-sticky;
      top: 0px;
      z-index: 99;
      border-right: 1px solid #798ba9 !important;
      background-color: #c3c3c3;
    }
    
    .fixed-table-wrap table th::after {
      content: "";
      display: inline-block;
      width: 1px;
      background-color: #aba8a8;
      position: absolute;
      right: -1px;
      height: 40px;
      top: 0px;
    }
  </style>
</head>

<body>
  <div class="fixed-table-wrap">
    <table id="example" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
        </tr>
        <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
        </tr>
        <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
        </tr>
        <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
        </tr>
      </tbody>

    </table>
  </div>

</body>

</html>

Brachyuran answered 19/2, 2021 at 13:21 Comment(2)

Thanks for this but I can't set a fixed height along y-axis of the table as the table should be able to expand down into the page as data gets updated dynamically through vue or react – Harvey 19/2, 2021 at 20:46

could u please make a change in .fixed-table-wrap{ height:calc(100vh) } – Brachyuran 20/2, 2021 at 9:12

-2

Maybe you cant set table heading fixed in horizontal, but you can do this

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>  
            </tr>
            <tr>    
                <th>May</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>

            <tr>
                <th>...</th>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Gale answered 19/2, 2021 at 13:10 Comment(0)

Recommended topics

Hot tags