HTML table: how to make all rows equal height?

Question

I'm generating a table in HTML. I have a number of rows, whose count is kept in the variable {{ items|length }}

How do I make all rows the same height except the header row?

I've tried:

<style>
     table.equalDivide th { width:100 / {{ items|length }} %; }
</style>

But this doesn't work.

All the rows should have the height of the tallest one (12:00 - 14:00 in the image below).

Answer 1

This is as simple as I can get it - but it works...

Use Notepad or similar (Notepad++ recommended) to edit your HTML file as follows: (NOTE: syntax is crucially important - follow it exactly - especially single or double quotes)

1: Give your table a unique ID: table id="myTable" ...

2: Give your body element an onload function: body onload="resizeTable('myTable');" ...

3: In your head section add this:

<script type="text/javascript">
function resizeTable(tableID)
{
var tbl=document.getElementById(tableID), biggestRow=0, rowHeight=0, row=0;
for (row=0; row < tbl.rows.length; row++) {     //find biggest row height
    rowHeight=parseInt(tbl.rows[row].offsetHeight);
    if (rowHeight > biggestRow) {biggestRow=rowHeight;}
}
for (row=0; row < tbl.rows.length; row++) {     //set all rows to biggest row height
    tbl.rows[row].style.height=biggestRow + "px";
}
}
</script>

Answer 2

Edit: I think what you want to occur already happens normally. I created a JSFiddle that shows how a large cell will force other cells in the same row to have its height. I'm curious if something else is happening for you. Sorry if I am misunderstanding you.

---

Just apply a height to all the tr's. If you want the height to be dependent on the number of rows, just change the css rule accordingly.

HTML:

<table>
<tbody>
<th>Title</th>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
<tr><td>Baz</td></tr>
</tbody>
</table>

CSS:

tr {
  height: 50px;
}