When a height is specified in percentage, the Tbody element does not display correctly on the entire page

Hey there! Currently, I am working on a fixed header table. My goal is to create a table where the tbody section expands with the screen size and I would like to set the height in percentage (%) but unfortunately it doesn't seem to be functioning as expected. Oddly enough, when I use pixels, everything works perfectly. If you're curious about the code snippet, feel free to check out this Jsfiddle link where I'm attempting to set the tbody height using %.

     table {
            width: 100%;
            height:100%;
        }

        thead, tbody, tr, td, th { display: block; }

        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            height: 30px;

            /*text-align: left;*/
        }

        tbody {
            height: 125px;
            overflow-y: auto;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            width: 19.2%;
            float: left;
<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    ... (additional table rows)
    
    </tbody>
    
</table>

htmlcsshtml-table

Answer №1

Make changes to the CSS

tbody {
  height: 100vh; /*include this */
  overflow-y: auto;
}

Here is a functional fiddle link

Link to Fiddle

thead,
tbody,
tr,
td,
th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 30px;
  /*text-align: left;*/
}

tbody {
  height: 100vh;
  overflow-y: auto;
}

thead {
  /* fallback */
}

tbody td,
thead th {
  width: 19.2%;
  float: left;
}
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<table class="table table-striped">
  <thead>
    <tr>
      <th>Make</th>
      <th>Model</th>
      <th>Color</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="filterable-cell">Ford</td>
      <td class="filterable-cell">Escort</td>
      <td class="filterable-cell">Blue</td>
      <td class="filterable-cell">2000</td>
    </tr>
    <!-- Repeat the above row for as many times as needed -->
  </tbody>

</table>

Answer №2

When setting tbody to 100% height, it may appear blank because there is no content inside. For the desired effect, apply the 100% height to the td elements themselves. To ensure a fixed tbody height, consider specifying a specific height in pixels. For example, setting a height of 125px will provide 125 usable pixels and allow for scrollable content within that space. Modify the structure by adding styles to tbody tr td as shown below:

tbody {  
        overflow-y: auto;
    }

Then add the following styles:

tbody tr td {  
        height: 100%;
        overflow-y: auto;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

I came across an interesting example on MDN about using a clip-path SVG on an image. However, it seems that the same clip-path does not work properly when applied to a div. Can anyone shed some light on: The reason why this code is not achieving the inte ...

csssvgclip-path

Is there a way to align the height of a standard column with the ng-include section to ensure a cohesive page display?

I have been working on my Angular app and have implemented ng-include to dynamically add content to a template within the page. The issue I'm facing is that this specific area ends up being longer than both the html and body elements where it resides. ...

htmlcssangularjs

Dropdown button split aligned with its first button

Comparing the alignment of split button dropdowns in Bootstrap 3 and Bootstrap 4, I find that Bootstrap 3 aligns them to the left of the first button, while Bootstrap 4 only aligns them according to the second button. https://i.stack.imgur.com/gAt78.png h ...

csstwitter-bootstrapbootstrap-4

Injecting JavaScript object values into dynamically generated modal

I have a JavaScript object that contains various training courses. Each category includes multiple training courses, and each course is associated with a specific category. Currently, I am able to display the title and description of each category in a mo ...

javascriptjqueryhtmlobjectfor-loop

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

javascripthtmlangularjs

Why is a question mark added to the URL when the login button is clicked

I've encountered an issue where clicking this code for the first time redirects me to localhost:8080//? instead of localhost:8080//admin.html. Any idea why this is happening? $("#admin-login").click(function(){ var data = {"username": $("#admin ...

javascripthtmlajax

Optimal approach for creating a CSS button with a dynamic size, gradient background and arrow design

I'm utilizing the Zurb Foundation framework and aiming to create dynamic call-to-action buttons with varying sizes, text, a background gradient, and a right-pointing arrow. There are three potential approaches I've envisioned: Employ an a el ...

htmlcssbuttonzurb-foundation

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

Presenting XML data on a webpage using AJAX technology

I am currently working on setting up a web radio station with a program that allows streaming (jazler) to send xml files via ftp to a web server to automatically update information such as the current song playing and previous songs. The code for NowOnAir ...

javascripthtmlajaxxml

What is the most efficient way to send multiple arrays by selecting checkboxes?

Currently, I am faced with a challenge where I have a selection of items from a list that need to be submitted in the form of three different arrays with distinct values to PHP. These arrays include: Device id, Client comment, and Manufacturer comment. < ...

phphtmlarrayscheckboxsubmit

Emphasizing Text Within Div Element

Imagine having a div element structured as such: <div id="test" class="sourcecode"> "Some String" </div> Can CSS and JavaScript be utilized to highlight a specific portion of that string based on a search query? For instance, if the search q ...

phpjavascriptcssstringhighlight

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...

javascripthtmlcssapachenginx

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

htmlcssbootstrap-5

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

The dimensions of images and text in HTML

I'm having trouble adjusting my page to fit the resolution of the screen. The image I'm using is 1920 pixels wide, but it's extending beyond the window. Click this link for the code and images: index1.html and style1.css are not needed. < ...

htmlcss

Utilizing the retina pixel ratio media query in Internet Explorer 8

I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons. Here is my mixin for retina ...

cssinternet-explorer-8sassmedia-queriesretina

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

My goal is to develop a Single Page Application using Vue3 and the Bootstrap 5 framework with a simple layout of Header -> Content -> Footer. I want the Content section to fill the space between the header and footer, ensuring there is no overlap. Ho ...

javascripthtmlcssvuejs3bootstrap-5

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

csstwitter-bootstrapbootstrap-4

Having trouble with Viewport CSS being restricted by Blogger?

I've been working on configuring my personal blog, which is hosted on Blogger, to properly adapt to the Windows 8 IE snap feature. Through my research online, it has been suggested that I include a @viewport in the CSS. However, it seems like the CSS ...

htmlcssinternet-explorerwindows-8.1blogger