How to get table cells to have equal height

Question

How do I get table cells to be the same height? Check out http://thomaswd.com/organizer/dashboard and click on calendar. You will see that the table cells have different heights. I have 2 rows on the top of the table that is fixed height, and my table height is 100%. I don't want a specified pixel height, because that will not work when the browser is resized. How do I do this?

you can use relative height as well, e.g. 10% – Horen Mar 13 '13 at 22:45 — Horen, Mar 13 '13 at 22:45
yes, but the top 2 rows have pixel heights – Thomas Lai Mar 13 '13 at 22:45 — Thomas Lai, Mar 13 '13 at 22:45

score 6 · Answer 1 · answered Mar 13 '13 at 23:13

Looks like what you want is for the tallest cell's height to propagate across the row.

You can do this with javascript:

var eq_el_height = function(els, min_or_max) {

    els.each(function() {
        $(this).height('auto');
    });

    var m = $(els[0]).height();

    els.each(function() {
        var h = $(this).height();

        if (min_or_max === "max") {
            m = h > m ? h : m;
        } else {
            m = h < m ? h : m;
        }
    });

    els.each(function() {
        $(this).height(m);
    });
};

Pass your table cells into the function like this:

        $(#fixedheight tr').each(function(){
            eq_el_height($(this).find('td'), "max");
        });

score 3 · Accepted Answer · answered Mar 13 '13 at 23:19

3

To get the table cells to have equal height I used Google Chrome and inspected one of the days on the calendar by right-clicking on the day and selecting 'Inspect Element'. Then I changed the styling of 'calendar-day' like so:

/* shared */
td.calendar-day, td.calendar-day-np {  
    border-bottom:1px solid #999; 
    border-right:1px solid #999; 
    height: 10%;
}

Just specify in style.css what you would like the height to be.

answered Mar 13 '13 at 23:19

Jesus Noland

197
2
11

3

What's the percentage `height: 10%;` out of? What if I have more than ten rows? – Flimm Feb 06 '15 at 16:01
Since it's a table cell that height would be out of the height of the table. – Jesus Noland May 31 '15 at 18:09

score 2 · Answer 3 · answered May 02 '17 at 14:26

2

Another solution could be:

var maxHeight = null;
$('#tableId tr').each(function() {
    var thisHeight = $(this).height();
    if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);

answered May 02 '17 at 14:26

Erick Lanford Xenes

1,467
2
20
34

score 1 · Answer 4 · edited May 23 '17 at 12:34

From: How can I force all rows in a table to have the same height

<html>
    <head>
        <style type="text/css">
            #fixedheight {
                table-layout: fixed;
            }

            #fixedheight td {
                width: 25%;
            }

            #fixedheight td div {
                height: 20px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <table id="fixedheight">
            <tbody>
            <tr>
                <td><div>content</div></td>
                <td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td>
                <td><div>more content</div></td>
                <td><div>small content</div></td>
                <td><div>enough already</div></td>
            </tr>
            </tbody>
        </table>
    </body>
</html>

then use a percentage instead of fixed height? from resizing your table personally I would add a min-size and otherflow hidden as well! — Henry Quekett, Mar 13 '13 at 22:51
I know, but my problem is that I have 2 rows on top that are fixed height, and will percentages still work? — Thomas Lai, Mar 13 '13 at 23:09

How to get table cells to have equal height

4 Answers4