Horizontal scroll in table attached with position fixed

Question

A div with different tables that should all scroll horizontally while the first table must be attached to the top of the page fixed, so it is also visible when scrolling vertically.

Is there anyway to get this to work? Check out the fiddle: https://jsfiddle.net/1eu69ozm/8/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  position: relative;
}

#firstTableWrapper {
  position: fixed;
}

<div class="table-container">
  <div id="firstTableWrapper">
    <table id="firstTable" class="tableClass">
      <tr class="trFirst">
        <th>
          <span>Make</span>
        </th>
        <td>Harley-Davidson</td>
        <td>BMW</td>
        <td>Honda</td>
        <td>Yamaha</td>
        <td>Ducati</td>
        <td>Kawasaki</td>
      </tr>
    </table>
  </div>
  <table class="tableClass">
    <tr>
      <th>
        <span>Model</span>
      </th>
      <td>Street Glide</td>
      <td>R 1250 GS Adventure</td>
      <td>CBR600RR</td>
      <td>YZF-R6</td>
      <td>Panigale V2</td>
      <td>Ninja ZX-10R</td>
    </tr>
    <tr>
      <th>
        <span>Color</span>
      </th>
      <td>Black</td>
      <td>White</td>
      <td>Red</td>
      <td>Blue</td>
      <td>Red</td>
      <td>Green</td>
    </tr>
  </table>
</div>

Does this answer your question? [Table header to stay fixed at the top when user scrolls it out of view with jQuery](https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque) — Heretic Monkey, Apr 25 '23 at 14:21

score 0 · Accepted Answer · answered Apr 25 '23 at 14:18

0

I figured it out moments after this post

Just add max width and overflow-x, think I tried before but without max-width..

     #firstTableWrapper {
      position: fixed;
      max-width: 100%;
      overflow-x: auto;
    }

answered Apr 25 '23 at 14:18

bjorn

129
1
11

score 0 · Answer 2 · edited Apr 25 '23 at 14:27

0

just as Rafael Bento said, use the <thead></thead> and <tbody></tbody> tags. Your max-width:100%;overflow-x:auto;overflow-y:hidden. Best achieved if you use bootstrap 5 responsive table.

edited Apr 25 '23 at 14:27

Heretic Monkey

11,687
7
53
122

answered Apr 25 '23 at 14:25

claver

32
2

score 0 · Answer 3 · answered Apr 25 '23 at 14:40

You shouldn't split in two tables unless you have a fixed column width. Using a thead and tbody, and fixing the thead with position: sticky is the best way. That way, the width of a column can be calculated automatically keeping the data aligned.

.table-container {
  height: 170px;
  border: 1px solid red;
  overflow: scroll;
  max-width: 400px;
}
.tableClass {
  border-collapse: collapse;
}
.tableClass thead {
  position: sticky;
  top: 0;
  background: orange;
}
.tableClass tbody {
  height: 150px;
}
.tableClass th, .tableClass td {
  white-space: nowrap;
  padding: 2px 4px;
}

<div class="table-container">
  <table id="firstTable"  class="tableClass">
    <thead>
      <tr>
        <th><span>Make</span></th>
        <td>Harley-Davidson</td><td>BMW</td><td>Honda</td><td>Yamaha</td><td>Ducati</td><td>Kawasaki</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><span>Model</span></th><td>Street Glide</td><td>R 1250 GS Adventure</td><td>CBR600RR</td><td>YZF-R6</td><td>Panigale V2</td><td>Ninja ZX-10R</td>
      </tr>
      <tr>
        <th><span>Color</span></th>
        <td>Black</td><td>White</td><td>Red</td><td>Blue</td><td>Red</td><td>Green</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
      <tr>
        <th><span>Year</span></th>
        <td>2022</td><td>2021</td><td>2019</td><td>2020</td><td>2021</td><td>2022</td>
      </tr>
    </tbody>  
  </table>
</div>

thanks, the reason I need two tables is because I simplified the question. What I really working on is a much more complex table/site where I handle a lot of different type of data and for many reason need many tables. Here I use thead and tbody for each table. — bjorn, Apr 25 '23 at 17:01
Ok. But use sticky instead of fixed, that way the content dont go below it. — ariel, Apr 25 '23 at 19:34

Horizontal scroll in table attached with position fixed

3 Answers3