Question 58207 in Html Question posted in
Some basic documentation can be found here.

Horizontal scroll in table attached with position fixed – Html

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>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    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;
    }

  2. 0

    I can’t comment so I’ll post it here. But basically, use thead and tbody. And with some CSS and JS you can fix it in the top of the page. Check the answer in this post answered by Andrew Whitaker because it’s what you need.

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search