Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far:

<table>
<tbody style="height: 300px; overflow:auto;">
//php for loop to populate table with <tr>s/<td>s
</tbody>
</table>

Everything seems to be working well, except when there are only one or two rows, they end up stretched to fit the 300px height. I tried changing 'height' to 'max-height', but then the scroll bars never show up, no matter how big the table gets. Can anyone help me figure out where I'm making a mistake?

htmlcss

Answer №1

It seems peculiar that the tr's and td's are expanding in height when there aren't many of them. However, there could be a few solutions to this issue.

You might want to consider setting a fixed height for the cells or not applying any height styling at all, and instead apply height styling to the surrounding div containing the table. Personally, I have tried the latter approach and found success. This allows the cells to maintain a regular height based on their content.

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

What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistanc ...

htmlcss

What is the method for ensuring a p element is only as wide as necessary when it wraps within a parent div with a specified hardcoded width?

Is there a way to adjust the width of the p-element in my example below based on the text inside without affecting the normal line break behavior, using only CSS if possible? It appears to be ignoring wrapping and is too wide: https://i.stack.imgur.com ...

htmlcss

Simple guide on how to use AJAX (without jQuery) and PHP to count the number of records

As a novice programmer, I am attempting to tally the number of records in a table. Despite perusing various code snippets, I am unable to seamlessly integrate them to pass the PHP result to my javascript code. Here is the current state of my code: showsca ...

javascriptphphtmlajax

Attempting to conditionally apply CSS to a component based on a prop, but unfortunately it is not functioning as expected

.storyMobile{ color:green; } .storyWeb{ color:red; } <div class="storyMobile"> hii </div> <div class="storyWeb"> hii </div> //main view <div> <story :story="stories[0]"/> </div> //here it prints ...

htmlcssvue.jsprop

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: https://i.sstatic.net/3p2wc.png Edi ...

csshtmlsvgflexbox

Create dynamic automatic titles in HTML with JavaScript

Below is the code snippet to add an image with a link to the home-page and an h1 with the document name (if there isn't one already). This HTML code includes a JavaScript file reference in the <head> section and uses a <h1> tag for the ti ...

javascripthtmldom

When using jQuery, the value of an input type text field remains constant despite any alerts

My issue involves an input text used to check if the corrected values are being displayed in an alert. However, when I modify a value in the form and check if the updated value appears in the alert box, it still shows the old value. Below is the relevant ...

javascripthtmljquery

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

htmlangulartypescript

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

Encountering Difficulty Fetching Data from JSON File Utilizing AngularJS

insert image description hereI am struggling to fetch data from a Json file using Angular Js. I am attempting to retrieve the Json data from a URL by clicking a button in Angular Js, and also add an empty tr td in a table when the button is clicked. ...

htmlangularjsdjango

What is the best way to make a multi-column image responsive in amp-html code?

Here is the concept I was referring to, you can see it in action by following this link <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-bo ...

htmlcssamp-htmlresponsive-images

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

Within one of my HTML files, I encountered the following line near the top: <script src="//maps.google.com/maps/api/js?key=apikey"></script> The API key is currently hardcoded in this file, but I would like to use a configuration option store ...

javascriptjqueryhtmlajax

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I'm attempting to arrange my boxes in a single line, with the ability to wrap and switch to column mode on smaller phone screens. Desired layout: Wins Losses Ties Points On shrinking screen: Wins Losses Ties Points Code ...

htmlangularflexboxangular-flex-layout

The JQuery UI datepicker is constantly popping open

On my website, I have implemented a JQuery UI date and time picker in a form. Users can select the date, time, and provide additional information. However, whenever the user clicks on the text input for additional information, the date and time picker pop- ...

phphtmljquery-ui

Quick and hassle-free form editing is a breeze with our user-friendly platform

Currently, the forms I have require certain files to be filled out before the submit button can be clicked. What I need is for the 'Title' field at the top of the list to also be marked as required. I know how to accomplish this for text fields, ...

htmlformsrequired-field

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

jqueryhtmljsongetjson

Dynamic header showing various sections of the image depending on screen size

Looking to create a responsive header image for my website using the 'mobile first' approach. I have a specific picture in mind that I want to display differently depending on the device's screen size, all while using the same image file. Fo ...

htmlcsstwitter-bootstrapfrontendbootstrap-4

Adding a custom source to the script tag in Angular 7

I am currently using angular cli to develop my web application. The app is being built in the dist folder as of now. This is the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adm ...

javascripthtmlangularangular7

Creating a right-aligned glyph within a Panel header using Bootstrap

I am currently designing a Panel using bootstrap and I would like to include a glyph in the heading, aligned to the right. I tried adding "text-right" to the span tag but unfortunately, it didn't work as expected. Here is the code snippet: < ...

htmlcsstwitter-bootstrap

Ways to align elements vertically in a container without using flexbox?

I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while ...

htmlcssflexbox