"Create a table with rows that automatically adjust to the same height, regardless

Is there a way to create a table where the height remains constant regardless of the number of rows added?

For example:

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

Even if rows are added, I want the height to stay consistent.

I cannot use percentage since the number of rows is unknown (calendar).

CSS:

 .cMid-Calender table{
    width:100%;
    height:calc(100% - 95px);
    table-layout:fixed;
    border-collapse: collapse;
    text-align:center; 
}
.cMid-Calender th{
    font-size: 14px;
    height:30px;
    font-weight: 300;
    color:#f333;
    text-align: left;
    padding-left:10px;
    background-color:#f8f8f8;
    height:25px;
}
.cMid-Calender td{
    border-top:1px solid #eaeaea;
    font-size: 22px;
    font-weight: 200;
    cursor: pointer;
    overflow: hidden;
    color:#767676;
    padding:0px;
    vertical-align: top;
    text-align: left;
}
htmlcsscss-tables

Answer №1

Since you mentioned that you are utilizing jquery, you have the capability to implement something similar to the following:

var tallestHeight = 0;

// iterate through and track the tallest height
$(".cMid-Calender td").each(function(index) {
    if($(this).height() > tallestHeight) {
        tallestHeight = $(this).height();
    };
});

// adjust all elements to match the tallest height
$(".cMid-Calender td").height(tallestHeight);

If necessary, you can encapsulate this code within a function for recalculating, especially when new calendar items are added or removed.

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

Retrieve information from the text input field and proceed with the action outcome

Currently, I am in the process of developing a form on an asp.net website. The objective is to have users land on a page named Software, where two variables are checked for empty values upon loading. If the check reveals emptiness, the Software View is ret ...

htmlasp.net

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

cssnode.jsiterationstyluscss-animations

Assign a class to the checkbox of the first parent

I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...

jqueryhtmlcss

Automatically modify browser configurations to disable document caching

Is it possible to prevent browsers from caching pages using JavaScript? I've noticed that even though PHP has a redirection implemented once the user logs in, when they press the browser's history button, it goes back to the login form. This is b ...

javascripthtml

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

cssangularprintingmaterial-designangular-material

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

The combination of loading and scrolling JavaScript code is not functioning properly on the website

I created an HTML webpage that includes some JavaScript code to enhance the user experience. However, I encountered an issue when trying to incorporate a load JavaScript function alongside the scroll JavaScript function on my page. The load script is posi ...

javascripthtmlcss

When an image is hovered over, the HTML background undergoes a transformation

Essentially: div:hover { body{ background-image:(bg.png); } } This code is conceptual but flawed, yet it effectively illustrates my problem. ...

csshtmlhoverbackground-image

Angular select element is not functioning properly with the `addEventListener` method

My current project involves creating a table using the primeng library. The table consists of three rows and three columns, and all the data is static. Even though I am utilizing an external library, I find myself traversing the DOM directly. <p-table ...

javascripthtmlangulartypescriptdom-events

Expanding the width of a bootstrap dropdown menu

Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Displaying content using Jquery's slideDown feature, overlapping existing content

I am working on displaying one piece of content over another using Jquery slidedown as an overlay. Despite adding z-index properties, I am struggling to make it work. My goal is to have the div with class "selection_nip" appear as an overlay on top of ano ...

jqueryhtmlcss

The required widths of table columns are not being adhered to

I'm struggling to create an HTML email that will display correctly in Outlook. I initially used list items and the list-style-image Property, but that doesn't work in Outlook. Essentially, I have a table with 2 rows. The left row has an 11 pixel ...

htmlcssoutlook

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Can someone assist me with this re-upload? I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a ...

javascripthtmljquerycss

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

javascriptcssangularjsjasminecss-selectors

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

The content will be visible when the masonry element is in the active state

I have been working on creating a unique image gallery effect using Masonry layout where the images start at 0.2 opacity and change to full opacity of 1 when hovered over. Additionally, I want each image to fade to 0.7 opacity with text "Petra, Jordan" app ...

htmlcsshoveropacitymasonry

Vue.js and webpack are having trouble loading the images located in the "assets" folder into the Vue components

How can I import images from an assets folder into Vue components? Here is my "Card.vue" component: <template> <div class="container"> <div class="card" style="width: 18rem;"> <!-- Use this <img> tag to load the ima ...

htmlvue.js

Utilize Node.js and Cheerio to extract data from an HTML table

Having trouble converting an HTML table to JSON. HTML table structure: <div id="content"> <h1>content-information</h1> <table class="testinformation"> <thead> <tr> ...

javascripthtmlnode.jsparsingcheerio

What is the best way to eliminate the text-decoration underline from a flex child when the parent is designated as the anchor?

I need help removing the text-decoration of a flex child when the parent is the anchor. Despite trying various CSS code, it doesn't seem to work as expected. On my WordPress site, the underline only shows on hover, but in the jsFiddle example I create ...

csshoverflexbox