Search code examples
htmlcsshtml-tablerows

HTML table: how to make all rows equal height?

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).

enter image description here

Solution

  • 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>