Changing the table height based on the number of rows using HTML and CSS

<div class="modal-body">
              <div class="table-responsive">
                 <table id="table">
                   <thead>
                    <tr>
                       <th>...</th>
                           ...
                    </tr>
                   <thead>

                   <tbody>
                    <tr>
                       <td>...</td>
                           ...
                    </tr>
                   <thead>
                 </table> 
              </div>
        </div>

I am looking for a way to dynamically adjust the height of my table based on the number of rows it contains. Specifically, I want to set a maximum height (N px), but if there are fewer rows needed to fill less than N px, I want the table's height to adjust accordingly. I attempted to use max-height property without success, as the container was then empty.

Here is the code snippet I tried: JSFiddle Link

htmlcss

Answer №1

To increase the height of the table rows, you can apply the height property to the tr element. Additionally, in this example, I've changed the id from table to class="mytable".

tr {
  height: 50px;
}

table *{
  border: 1px solid green;
  box-sizing: border-box;
}

.table-responsive{
  display: inline-block;
  max-height: 150px;
  overflow: auto;
}
<div class="modal-body">
  <div class="table-responsive">
    <table class="mytable">
      <thead>
        <tr>
          <th>Example Header 1</th>
          <th>Example Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Row 1 data 1</th>
          <td>Row 1 data 2</td>
        </tr>
        <tr>
          <th>Row 2 data 1</th>
          <td>Row 2 data 2</td>
        </tr>
        <tr>
          <th>Row 3 data 1</th>
          <td>Row 3 data 2</td>
        </tr>
            <tr>
          <th>Row 4 data 1</th>
          <td>Row 4 data 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<hr>

<div class="modal-body">
  <div class="table-responsive">
    <table class="mytable">
      <thead>
        <tr>
          <th>Example Header 1</th>
          <th>Example Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Row 1 data 1</th>
          <td>Row 1 data 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer №2

Experiment with the code snippet provided below:

table,td,th{
    border: 1px solid black;
    width:200px;
}

 thead,tbody{
    display:block;
 }
  
tbody{
  max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr> <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr> <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

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

Unable to reach the margin-left properties of the elements

I am facing an issue in accessing the current margin-left CSS property of the class .circle in the code snippet below. A demonstration of this problem can be found on a website called PLUNKr. The reason I need to access this property is because I have to ...

htmlcssangulartypescript

Tips for aligning images inside tab content areas

While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...

jqueryhtmlcss

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

htmlwcfsoapwsdl

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Unexpected blank space detected at the bottom of the page in Angular 13

Using the NGX-ADMIN template built on Angular 12 has been smooth sailing until an upgrade to Angular 13. With this simple version change, I am now faced with a perplexing issue that I can't seem to pinpoint or resolve. I can confidently say that shif ...

cssangular

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Tips for positioning a website's name above navigation links in a header | Using HTML and CSS

I need assistance in placing the website name above the navigation bar on my webpage. I have included HTML and CSS codes below. The {load static} command within the HTML code loads CSS files in a Django project, but in this case, there is no Django involv ...

htmlcss

Switching the displayed image depending on the JSON data received

As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...

javascriptjqueryhtmljson

CSS: The search field's results are displayed in a width that is half of

There seems to be an issue with the search dropdown results on my website. When you click on the magnifying glass in the top menu and try to search, the results only appear as half the width of the search form. I would like to know how I can display it i ...

htmlcss

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

javascripthtmlcssinternet-explorerinternet-explorer-11

What is the best way to enlarge an image and have it perfectly fill the screen while scrolling?

Having a background in photography and using SVG graphics as a mask, I have implemented an image as the background-image and the svg mask as a mask-image on the same element. The result is displayed below: My query pertains to expanding this image to fit ...

htmlcsssvg

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

cssreactjsnext.jsstylesreact-select

Ways to position Drop-down menu flush against the left edge of the webpage?

I am facing a challenge in customizing my CSS3 Mega drop-down menu. I want the mega menu to start from the left side of the main page, beginning from the home button area and extending all the way to the end. Currently, it is appearing where the parent men ...

htmlcss

The 1920px minimum width is not triggering as expected

When using @media screen and (min-width: 1920px), the style is not applied until the min-width is changed to 1396px on a 1920x1080 screen. Despite accounting for the scroll bar size, the issue persists. It seems unlikely that any other CSS is overriding t ...

htmlcss

Issue with presenting the scrollbar alongside the Dropdown menu

I'm in the process of creating a menu with multiple items and sub-items. I'd like to have a scroll bar appear alongside the items if they become too numerous. The same goes for sub-menus and so forth. Check out this example to see what I mean. ...

htmlcssmenu

Text that appears when you hover over specific locations within one image

https://i.sstatic.net/G1uWk.png I need assistance in creating a feature where users can see short descriptions of individuals in a photo when hovering over them (not like a tooltip). I attempted to use an area map but encountered difficulties in implement ...

htmlcssbootstrap-4

HTML5 Video in IE9 and 8: Loads Successfully but Appears "Invisible"

I have an HTML5 video tag on a webpage, along with a flash fallback for Internet Explorer 8. The video element is initially hidden using display:none and attached to a parent 'a' until a play button (image) is clicked. When the play button is pre ...

jquerycssinternet-explorer-8internet-explorer-9html5-video

Bootstrap modal not displaying in full view

I recently ran into some issues while using a jQuery plugin with my bootstrap modal on my website. After implementing jQuery.noConflict(), I encountered a problem where the program no longer recognized $, forcing me to replace all instances of it with jQue ...

javascriptjqueryhtmltwitter-bootstrap

Guide to creating a search bar that scans the text inside an external .txt file

Kindly scroll down to view the updated content, or read through from here for a better understanding of my requirements. I am seeking assistance from an expert in developing a website (not exactly my forte :D) which allows users to search for their banned ...

javascriptphphtmlcsssearch

Having difficulty navigating to a different page in Angular 4

I'm currently attempting to transition from a home page (localhost.com) to another page (localhost.com/listing). Although the app compiles correctly, I encounter an issue where nothing changes when I try to navigate to the new page. My approach has m ...

htmlcssangulartypescriptangular2-routing