Is it possible to have two tables with different columns but the same height in HTML and CSS?

Question

Is it possible to have two tables with different columns but the same height in HTML and CSS?

I am facing an issue with two tables that are floated:left to appear next to each other. I want to make table 2 the same height as table 1, so that the yellow background extends down to the bottom of table 1. Here is the current setup:

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

What I want it to look like:

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

I prefer not to set fixed pixel heights, as I need it to display consistently across different monitors and mobile devices.

Edit: I have decided to give the last row a longer height based on the answers provided. Thank you for your help.

html css

Answer 1

Answer №1

To determine the number of rows in a table, this JavaScript code snippet can be used within a tag:

var totalRows = document.getElementById("myTable").rows.length;

Here, "myTable" refers to the id attribute of the left table.

Next, you can match the row count of the second table with the variable x obtained earlier:

var currentRows = document.getElementById("mySecondTable").rows.length;

The difference between x and y will indicate how many new rows need to be added to the second table:

var numRowsToAdd =  totalRows - currentRows;

for(var i = 0; i < numRowsToAdd; i++) {
  var secondTable = document.getElementById("mySecondTable");
  var newRow = document.createElement('tr');
  //Customize attributes of the newly created row, such as background-color.

 secondTable.appendChild(newRow);
}

Answer 2

To determine the number of rows in a table, this JavaScript code snippet can be used within a tag:

var totalRows = document.getElementById("myTable").rows.length;

Here, "myTable" refers to the id attribute of the left table.

Next, you can match the row count of the second table with the variable x obtained earlier:

var currentRows = document.getElementById("mySecondTable").rows.length;

The difference between x and y will indicate how many new rows need to be added to the second table:

var numRowsToAdd =  totalRows - currentRows;

for(var i = 0; i < numRowsToAdd; i++) {
  var secondTable = document.getElementById("mySecondTable");
  var newRow = document.createElement('tr');
  //Customize attributes of the newly created row, such as background-color.

 secondTable.appendChild(newRow);
}

Answer 3

Answer №2

You can give the parent div the class .row-eq-height:

CSS:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

See it in action here

Answer 4

You can give the parent div the class .row-eq-height:

CSS:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

See it in action here

Is it possible to have two tables with different columns but the same height in HTML and CSS?

Answer №1

Answer №2

CSS:

Similar questions

Displaying the Indian Rupee symbol in PHP

Building a Horizontal Line Component in ReactJS

How can one transform personalized HTML into a PDF document?

Transition smoothly between sections using fullPage.js with clipping path effects

In CSS, the color inheritance applies when a link is contained within a block of text

What is the best way to determine the currently active component in Angular 5?

The functionality of HTML labels may be limited when used in conjunction with AJAX

The loop in MVC is not functioning properly when dealing with various MapRoutes

Conditional rendering of Materialize navbar links

Unable to utilize CSS filter property in Internet Explorer 10

Position the dropdown items of the navbar side by side

Ways to gather all the elements on each page

What could be causing Ajax's html() function to create a loop that never ends?

While attempting to access a form response in Java, I have encountered an issue where the content does not load properly due to the delay in loading. This causes Java to retrieve incorrect information

When using the scrollHeight property of an iframe, it actually returns the height of the iframe

Adapting the Homepage Based on User Authentication

What is the best way to apply box shadow to a particular region using CSS?

The dynamic page is causing JQuery to be triggered twice

What is the best way to place a select tag within a container that is nested inside an echo statement?

Looking for assistance with CSS to properly align a dozen items