Specifying percentage width for CSS table cells

Question

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!

Answer 1

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

Answer 2

I cannot tell you the reason but if you force the container div to have 100% width the behaviors of the two cases are identical.

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

Updated version: http://jsfiddle.net/DLjnH/1/