Container filled with a table element

Question

Container filled with a table element

My challenge involves a container grid with 3 div flex subelements. The first is the fixed header, the second is the body, and the third is the fixed footer. Within the body, there is a table. What I want to achieve is that when I resize the window, the table inside the "body" section remains within the section by applying overflow-y of the tbody so that the table never stretches the section containing it. Do you have any ideas on how to accomplish this?

In the initial image, the table is housed in the yellow body with tbody.height=600px. The height of the yellow body is 660px. When I resize the window, the scenario looks like the second image. A scrollbar appears in the window because the height of the table exceeds the height of the yellow section, causing the footer (orange) to disappear. My goal is for the window's scrollbar not to appear upon resizing, but instead, for the table's height to be reduced, displaying only the table's scrollbar as shown in the third image. https://i.sstatic.net/qeak4.jpg https://i.sstatic.net/AO51o.jpg https://i.sstatic.net/seDVe.jpg

html css flexbox overflow css-grid

Answer 1

Answer №1

It is more beneficial to visualize an example.

However, at this moment, I can propose the following approach:

The header element should have position: fixed and top: 0, as you previously mentioned.
The middle element should include padding-top: 100px (equivalent to the height of the header) and padding-bottom: 100px (similar to the footer's height).
The footer element should be styled with position: fixed and bottom: 0, aligning with your specifications.

You can employ standard body scrolling in this scenario.

Please provide a live example for better accuracy. You may utilize https://jsfiddle.net/

UPDATED

Following my suggestion, here is an example featuring only body scrolling.

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

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

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c679a;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c9a25;
}

.container {
  position: relative;
  z-index: 1;
  padding-top: 50px; /* same as .header height */
  padding-bottom: 50px; /* same as .footer height */
}

.table {
  width: 100%;
  border: 0;
}

.table thead th {
  position: sticky;
  top: 50px; /* same as .header height */
  background: #ccc;
  border: 0;
}

<div class="header"></div>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <!-- Additional table rows omitted for brevity -->
      <tr>
        <td>last</td>
        <td>last</td>
        <td>last</td>
        <td>last</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer"></div>

Answer 2

It is more beneficial to visualize an example.

However, at this moment, I can propose the following approach:

The header element should have position: fixed and top: 0, as you previously mentioned.
The middle element should include padding-top: 100px (equivalent to the height of the header) and padding-bottom: 100px (similar to the footer's height).
The footer element should be styled with position: fixed and bottom: 0, aligning with your specifications.

You can employ standard body scrolling in this scenario.

Please provide a live example for better accuracy. You may utilize https://jsfiddle.net/

UPDATED

Following my suggestion, here is an example featuring only body scrolling.

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

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

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c679a;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 2;
  background: #1c9a25;
}

.container {
  position: relative;
  z-index: 1;
  padding-top: 50px; /* same as .header height */
  padding-bottom: 50px; /* same as .footer height */
}

.table {
  width: 100%;
  border: 0;
}

.table thead th {
  position: sticky;
  top: 50px; /* same as .header height */
  background: #ccc;
  border: 0;
}

<div class="header"></div>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <!-- Additional table rows omitted for brevity -->
      <tr>
        <td>last</td>
        <td>last</td>
        <td>last</td>
        <td>last</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer"></div>

Container filled with a table element

Answer №1

Similar questions

Insert a hyperlink button using InnerHtml

CSS for a Dropdown Menu with Multiple Layers

How can we dynamically resize page content to fit varying browser window sizes across different devices with the help of jQuery/JavaScript?

The menu on Android gets cut off by the status bar

Text that is aligned vertically and centered within a div container

The background size does not adjust to the size of the viewport

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

The website is missing the display of Google Maps

Image Handpicked by JCrop User

Adjusting Classes in JavaScript with jQuery

Issue with grid element not properly scaling using the transform:scale property

The function document.getElementById is unable to select multiple elements simultaneously

Placing a collection of <a> anchor tags inside a div and making them float

What is the best way to ensure a string of words in HTML/CSS wraps to the next line seamlessly?

Discover the contents within #document utilizing PUPPETEER

Incorporating Cascading Style Sheets (CSS) to

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

After a slight delay, the animated element twitches into action

What is the best way to make the final character in the input placeholder appear in red?

Utilizing Selenium to Extract Data from ESPN Website