Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/

Check out the code snippet from the fiddle:

HTML

<table>
    <tr>
        <td>
            <div>small content</div>
        </td>
        <td>
            <div>this is some longer content that will wrap.
                 I want the other div to be the same height as this one.</div>
        </td>
    </tr>
</table>

CSS

table{
    width: 200px;
    table-layout: fixed;
}
div {
    border: 1px solid black;
}

Answer №1

Make sure to include the following attributes in your div style:

height: 100%;
display: inline-block;

Here is the updated fiddle.

Answer №2

To ensure all TD elements have a specific height, you can define it within the CSS and then set the DIVs height to 100%:

table{
    width: 200px;
    table-layout: fixed;
    height: 100%;
}

table td {
    height: 100%;
}

div {
    border: 1px solid black;
    height: 100%;
}

http://jsfiddle.net/92uLpfk5/3/

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

Automatically tally up the pages and showcase the page numbers for seamless printing

I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

JavaScript fails to display image slideshows upon loading

Currently, I am utilizing a slideshow feature in order to display any additional images that may be retrieved from the globalgiving api. However, there is an issue with the slideshow not appearing when the page is initially loaded or when opening a modal, ...

Double tap on the YouTube video

Recently, I added a YouTube video to my project. However, I am encountering an issue where when I double click on the video, it opens in a new tab. What I actually want is for the video to open in full screen when clicked. Appreciate any help! ...

The collision between the Textfield Label and Value is being caused by Chrome's Autofill feature

When using React, I noticed that Autocomplete Chrome values don't trigger the onChange event right away. This leads to an issue where there is a collision between the MUI TextField Label and the actual values during the initial page load. How can I go ...

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Starting fresh, so I might sound like a beginner with this question. How can I make use of the update button to update specific rows instead of just the top row? Every time I try to update, it only works for the top row. Here's the code snippet from ...

Filtering Wordpress content on the fly with a dropdown menu (utilizing php and ajax)

Objective: My goal is to create a dynamic webpage that allows visitors to choose a specific month and year from a dropdown menu. The content (posts) on the page should automatically change based on the selected values. Currently, I am using the following ...

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...

Bootstrap Navigation Bar Animation causing Input Fields to be cut off

I am working with a collapsible bootstrap NavBar that contains two elements within the collapsible <div>, <form class="form-inline> and <select class="custom-select" id="menu"> (Refer to my code below) The problem I'm encountering ...

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

Unusual CSS media queries behavior

During my project work, I faced a puzzling issue which can be illustrated with the following example: Here is the sample CSS code: *, *::after, *::before { box-sizing: border-box; margin: 0; border: 0; } @media only screen and (max-width ...

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

What are the benefits of using Semantic mark-up and WAI-ARIA in a Tabbed Section?

Currently working on the structure of a website and aiming to improve accessibility skills. I'm curious about the most appropriate way to mark up tabbed content. Here's what I have so far: <section> <nav> <a href="#tab" aria ...

Chrome: Box-shadow not visible on images with a background present

Recently, I have noticed an issue with the box-shadow not displaying on images with a background on my website. This problem started occurring in Chrome a few months ago, despite working perfectly fine around six months ago. To pinpoint the problem, I cre ...

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

<!DOCTYPE html> <head> <title> Oval shape</title> </head> <body> <div style="width:400px; height:400px; background-color:#ff0;">Oval</div> <p> Exploring the creation of an oval shape using HTML5 ...

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

I currently have my LMS set up with Moodle 4 and the boost theme which is based on bootstrap (github) However, the default page layout appears very narrow on all devices and I would like to utilize the responsive design features of Bootstrap for different ...

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): https://i.sstatic.net/pJFOi.png Examining my existing fronten ...

HTML/CSS Selecting Tables: First, Last, and More

Is there a way to combine selector tags in order to style the first <td> inside the first <tr>? I have attempted various methods to merge these selectors, albeit unsuccessfully. I am simply seeking guidance on whether or not this is even possi ...