Html – Specifying percentage width for CSS table cells

csshtml

I'm trying to create an HTML/CSS-based week calendar using CSS display:table-cell styling on the divs corresponding to each day. When I specify a percent width for the day divs that is greater than 17%, the divs fills the whole screen as expected (since 7*17% > 100%).

jsfiddle here: http://jsfiddle.net/huDxZ/1/

However, when I specify a percent width that is 16% or less, the divs behave entirely differently, taking up only part of the page width.

jsfiddle here: http://jsfiddle.net/DLjnH/

I would like my day divs to each have widths of about 14% so they roughly fill the width of the page and have equal sizes. Unfortunately, a width of 14% looks even worse.

jsfiddle here:http://jsfiddle.net/YB5bY/

What is causing this unexpected behavior? Is there any way around it? I need to explicitly specify widths because eventually I would like the days of the calendar to expand on mouseover.

Please, no solutions involving floats.

Thanks!

Best Solution

CSS rules percentage values is always relative to the value of the same property of the parent.
Try adding an explicit width to the container:

#calendar {
    display: table;
    height:900px;
    width: 100%;
}

The you can use 14% for the ".day" elements:

DEMO