Ensure the table body scrolls the full height of the page while maintaining a fixed header when the table is out of view

Question

Ensure the table body scrolls the full height of the page while maintaining a fixed header when the table is out of view

My goal is to implement scroll bars for overflowed content within a single table on the page. Despite reading numerous posts on this topic and experimenting with various methods like setting height to 100% or using flex layout, I still can't seem to achieve the desired outcome.

The visualization provided should make it easier to understand. The blue squares indicate tables while the red/green ones represent divs.

https://i.sstatic.net/PY7PG.png

Whenever I assign a specific height value to ancestors of the table, the scrollbar works properly. However, the challenge lies in not knowing the exact height in advance.

For instance, the total height of the page depends on factors such as screen size and browser window dimensions.

My aim is to have the green div and its associated table expand to fill up all the remaining screen height. While this approach almost works, the final height exceeds the available screen space.

Additionally, applying 'height: 100%' to the table results in an overly long scroll bar that extends beyond the window's boundaries.

Here is a plunk showcasing the concept. Unfortunately, it doesn't function as intended. What am I overlooking?

css

Answer 1

Answer №1

I believe I have grasped the concept correctly ;)

thead tr:first-child th {
  position: sticky;
  top: 0;
  color: #fff;
  background: red;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

thead tr {
  background-color: #558;
}

thead tr th {
  width: 50px;
}

tbody tr {
  background-color: black;
  color: white;
}

.pageHeader {
  text-align: center;
  height: 50px;
  background-color: #ddd;
}

.pageBody {
  height: calc(100vh - 50px);
}

.mainTable,
.centerTable,
.rightTable {
  vertical-align: top;
}

thead tr:first-child th {
  position: sticky;
  top: 0;
  color: #fff;
  background: red;
}

.theTable {
  width: 100%;
}

.mainTable {
  display: inline-block;
  height: 100%;
  width: 300px;
  background-color: #8a8;
  overflow: auto;
}

.centerTable {
  display: inline-block;
  height: 50px; 
  width: 150px;
  background-color: #550;
}

rightTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

<div class="pageHeader">Page Header</div>
<div class="pageBody">
  <div class="mainTable">
    <table class="theTable">
      <thead>
        <tr>
          <th>AA</th>
          <th>BB</th>
          <th>CC</th>
        </tr>
      </thead>
      <tbody>
        <!-- ngRepeat: row in rowList -->
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
        </tr>
       ... (repeated code)
      </tbody>
    </table>
  </div>
  <div class="centerTable">
    Center table with fixed height/width
  </div>
  <div class="rightTable">
    Right Table with fixed height/width
  </div>
</div>

Answer 2

I believe I have grasped the concept correctly ;)

thead tr:first-child th {
  position: sticky;
  top: 0;
  color: #fff;
  background: red;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

thead tr {
  background-color: #558;
}

thead tr th {
  width: 50px;
}

tbody tr {
  background-color: black;
  color: white;
}

.pageHeader {
  text-align: center;
  height: 50px;
  background-color: #ddd;
}

.pageBody {
  height: calc(100vh - 50px);
}

.mainTable,
.centerTable,
.rightTable {
  vertical-align: top;
}

thead tr:first-child th {
  position: sticky;
  top: 0;
  color: #fff;
  background: red;
}

.theTable {
  width: 100%;
}

.mainTable {
  display: inline-block;
  height: 100%;
  width: 300px;
  background-color: #8a8;
  overflow: auto;
}

.centerTable {
  display: inline-block;
  height: 50px; 
  width: 150px;
  background-color: #550;
}

rightTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

<div class="pageHeader">Page Header</div>
<div class="pageBody">
  <div class="mainTable">
    <table class="theTable">
      <thead>
        <tr>
          <th>AA</th>
          <th>BB</th>
          <th>CC</th>
        </tr>
      </thead>
      <tbody>
        <!-- ngRepeat: row in rowList -->
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
        </tr>
       ... (repeated code)
      </tbody>
    </table>
  </div>
  <div class="centerTable">
    Center table with fixed height/width
  </div>
  <div class="rightTable">
    Right Table with fixed height/width
  </div>
</div>

Answer 3

Answer №2

thead tr { background-color: #558; }
thead tr th { width: 50px; }

tbody tr { 
  background-color: black;
  color: white;
}

.pageHeader {
  text-align: center;
  height: 50px;
  background-color: #ddd;
}

.mainTable, .centerTable, .rightTable {
  vertical-align: top;
}

.centerTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

.rightTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

.mainTable{
    height: calc(100vh - 66px);
    display: inline-grid;
    width: 300px;
    background-color: #8a8;
    overflow-y: scroll;
}

body, html {
    height: auto;
}

<div class="pageHeader">Page Header</div>
<div class="pageBody">
  <div class="mainTable">
    <table class="theTable">
      <thead>
        <tr>
          <th>AA</th>
          <th>BB</th>
          <th>CC</th>
        </tr>
      </thead>
      <tbody>
        <!-- ngRepeat: row in rowList -->
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
        </tr>
        <!-- end ngRepeat: row in rowList -->
        ... (trimmed for brevity)
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">99</td>
          <td class="ng-binding">198</td>
          <td class="ng-binding">297</td>
        </tr>
        <!-- end ngRepeat: row in rowList -->
      </tbody>
    </table>
  </div>
  <div class="centerTable">
    Center table<br>fixed height/width
  </div>
  <div class="rightTable">
    Right Table<br>fixed height/width
  </div>
</div>

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

.mainTable{
    height: calc(100vh - 66px);
    display: inline-grid;
    width: 300px;
    background-color: #8a8;
    //-webkit-overflow-scrolling: touch; // for Safari
    overflow-y: scroll;
}

body, html {
    height: auto;
}

Answer 4

thead tr { background-color: #558; }
thead tr th { width: 50px; }

tbody tr { 
  background-color: black;
  color: white;
}

.pageHeader {
  text-align: center;
  height: 50px;
  background-color: #ddd;
}

.mainTable, .centerTable, .rightTable {
  vertical-align: top;
}

.centerTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

.rightTable {
  display: inline-block;
  height: 50px;
  width: 150px;
  background-color: #550;
}

.mainTable{
    height: calc(100vh - 66px);
    display: inline-grid;
    width: 300px;
    background-color: #8a8;
    overflow-y: scroll;
}

body, html {
    height: auto;
}

<div class="pageHeader">Page Header</div>
<div class="pageBody">
  <div class="mainTable">
    <table class="theTable">
      <thead>
        <tr>
          <th>AA</th>
          <th>BB</th>
          <th>CC</th>
        </tr>
      </thead>
      <tbody>
        <!-- ngRepeat: row in rowList -->
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
          <td class="ng-binding">0</td>
        </tr>
        <!-- end ngRepeat: row in rowList -->
        ... (trimmed for brevity)
        <tr ng-repeat="row in rowList" class="ng-scope">
          <td class="ng-binding">99</td>
          <td class="ng-binding">198</td>
          <td class="ng-binding">297</td>
        </tr>
        <!-- end ngRepeat: row in rowList -->
      </tbody>
    </table>
  </div>
  <div class="centerTable">
    Center table<br>fixed height/width
  </div>
  <div class="rightTable">
    Right Table<br>fixed height/width
  </div>
</div>

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

.mainTable{
    height: calc(100vh - 66px);
    display: inline-grid;
    width: 300px;
    background-color: #8a8;
    //-webkit-overflow-scrolling: touch; // for Safari
    overflow-y: scroll;
}

body, html {
    height: auto;
}

Ensure the table body scrolls the full height of the page while maintaining a fixed header when the table is out of view

Answer №1

Answer №2

Similar questions

What is the best method to restrict the size of a div to match the dimensions of the

Changing position with flair in CSS

Update background to full screen and include text when hovering over DIV

Achieving a seamless scrolling effect using CSS

Hiding content using the "display: none" CSS property may not function properly

Arrange the footers in the bootstrap card deck to be perfectly aligned at the top

Tips for positioning your side navigation menu parallel to the page edge

The CSS file is not connecting properly despite being located within the same directory

Is it possible to apply CSS based on a component's displayName?

Is the first child component of Material UI Stack not properly aligned?

Revamp the Bootstrap Carousel Control by replacing the default navigation arrows with stylish arrows featuring circle backgrounds

Align an image in the middle with a heading

Tips for containing `overflow` within a flexbox container

Pressing a button triggers the highlighting of a tab in HTML through the use of Javascript

The CSS transition for a DIV on an iOS Safari browser is experiencing a lag

What are some tips for keeping design proportions consistent on mobile apps?

css - aligning text below another text in the center

Creating a CSS Grid with Full-Width Columns and Consistent Margins

Can a stroke in an SVG image be created using a gradient color?

Using Javascript to prevent css from changing the display