I have two tables like so. These are floated:left to appear next to each other. I would like to have table 2 the same height as table 1. As in, the yellow background goes down to the bottom of table 1. Currently:
Should look like:
I don't want to have to hard code pixels as it needs to display the same across different monitors and mobile devices.
Edit: I'll just give the last row a longer height. Thanks for your answers.
You can find out how many rows are in a table using this call (JavaScript, include it in a tag):
var x = document.getElementById("myTable").rows.length;
where "myTable" is the id of your left table.
Then set the number of rows in the second table to x by getting the current number of rows:
var y = document.getElementById("mySecondTable").rows.length;
where "mySecondTable" is the id of your right table.
var numRowsToCreate = x - y;
for(i = 0; i < numRowsToCreate; i++) {
var secondTable = document.getElementById("mySecondTable");
var newRow = document.createElement('tr');
//Set any attributes of the table row here, like background-color.
secondTable.appendChild(newRow);
}
Add class .row-eq-height to parent div:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
