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?

Answer 1

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

Answer 2

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.