CODEWITHSUNDEEP
htmlcsshtml-tablerows
kkkkk
kkkkk

Reputation: 716

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

Upvotes: 6

Views: 7377

Answers (3)

Tony Duffill
Tony Duffill

Reputation: 287

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>

Upvotes: 1

Tony Duffill
Tony Duffill

Reputation: 287

I know of no way to do this with CSS.

All you can do (I think) is in your onload() function get the biggest row height by iterating through the table rows (table.rows[..].offsetHeight (I hope that's right-if not, try biggest cell height), then set the height of each row in the table to that value.

Upvotes: 1

James J. Hill
James J. Hill

Reputation: 139

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;
}

Upvotes: 1

Related Questions