How to get table cells to have equal height

css, css-tables, html

Solution

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.

Problem

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?

Original source

Related problems