Achieve equal height for the last row of a table in Internet Explorer using CSS and have it

How can I make the last row in this HTML code take up the remaining height, while allowing rows "one", "two", and "three" to only take as much height as they need?

This layout functions correctly in Chrome but not in Firefox or IE.

<table>
  <tr>
    <td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td/>
  </tr>
  <tr>
    <td>one</td>
  </tr>
  <tr>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
  </tr>
  <tr>
    <td>full</td>
  </tr>
</table>

The goal is for the last row with "full" to be tall, and rows "one", "two", and "three" to be minimal in height.

I've attempted setting specific heights on the rows like "<tr style="height:20px;">, as well as applying 100% height to the last row, but have not found success yet!

Update:

This design will accommodate various types of content, adapting the table size accordingly. If the div is large, the table should adjust to that height, but if the div is small, then rows "one", "two", and "three" should determine the table's height.

Answer №1

To determine the height of the last row in jQuery, you can find the top position of the last row and then compare it to the bottom position of the window or element. The resulting difference will be the height of the last row.

I haven't written any code yet as I'm unsure if you are referring to a table within an object or filling to the bottom of the window. Let me know if you need further clarification and I'll be happy to provide more details.

Answer №2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
  <tr>
    <td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td valign=top style="padding:0px;">
        <table height=1>
            <tr>
                <td>apple</td>
          </tr>
          <tr>
                <td>banana</td>
          </tr>
          <tr>
                <td>orange</td>
          </tr>
          <tr>
    <td valign=top>mangoes<br><br><br>papayas</td>
  </tr>
        </table>
  </td>
  </tr>
</table>
</body></html>

Updated version, compatible with ie6/ff browsers

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

Firefox fails to trigger HTML drag event

After successfully implementing draggable header columns on a table using Chrome as my browser, I encountered an issue when testing it in Firefox (version 17.0.1). It seems that the drag event does not fire in Firefox, although the dragstart event does. ...

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

Footer positioned centrally on screen

My webpage footer seems to be misplaced, appearing in the middle of my content instead of at the bottom where it should be. Surprisingly, the code for the footer works perfectly on other pages. Any suggestions on why this might be happening? I've sco ...

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

Hide the footer DIV in CSS by making it disappear with a height of 100%

I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...

Implementing color transitions in javascript

Everyone talks about transitioning things in CSS, but have you ever thought about transitioning background colors in JavaScript? I'm currently working on a function that changes the background color of a div with the id of ex1 to green. However, I&apo ...

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

Tips on extracting code differences from code inspector

Utilizing the Chrome code inspector is extremely valuable, but I often find it challenging to track the modifications made to CSS and HTML live. This becomes particularly cumbersome when there are multiple tags being modified. Are there any Chromium exten ...

iOS does not support Css3 Transition

My Transition Code works on PC and android devices, but it does not work on iOS devices. I am only using HTML and CSS. /***** BOX 3 *****/ #box3 { height:240px; width:198px; border:1px solid #dedede; background-color:#fcfcfc; position:relative; overflow:h ...

How can we ensure that the slider thumb label is always shown in Angular 16 Material components?

Is there a way to display the thumb label constantly on a material slider? The solution mentioned above does not seem to work with Angular 16 material UI slider. Could you kindly offer an alternative solution for this issue? ...

The CSS animation defined in the keyframes for the image fade-in and fade-out

I'm struggling to create a smooth fading effect between two images on my website. Although the images load in the browser, the animation doesn't seem to be working as expected. After reviewing my code, I suspect that the issue lies within the @ ...

The main page wrapper will be centered on all devices except for tablets, where it will appear

I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...

Choosing both large font and low vision CSS stylesheets concurrently

I'm currently working on designing one of my initial websites and have encountered a dilemma. I have three different stylesheets - one for low vision, one for large font, and the default one. I have three buttons to select these stylesheets, but I&apo ...

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

Struggling to set up a vertical grid using CSS in Bootstrap 3

Currently in the process of working on my final project as a student. Utilizing Bootstrap 3, I am striving to construct a grid that mirrors the structure depicted in the image below: Thus far, I have only achieved success in creating grids that span hori ...

Element Not Adjusting to Content Size

I am encountering an issue with my div. I have floated an image to the right and placed my text beside it. My aim is to create a div with a linear gradient, however, the div ends up filling the entire page. How can I make my div adjust to fit only its con ...

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - https://i.sstatic.net/MH5WA.png How can I achieve this effect on ion-card? Here is my H ...

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable. I attempted to create another div ...