title: Specifying percentage width for CSS table cells
body: <p>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%).  </p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/huDxZ/1/">http://jsfiddle.net/huDxZ/1/</a></p>
  
  <p>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.  </p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/DLjnH/">http://jsfiddle.net/DLjnH/</a></p>
  
  <p>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.</p>
  
  <p>jsfiddle here:http://jsfiddle.net/YB5bY/</p>
  
  <p>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.</p>
  
  <p>Please, no solutions involving floats.</p>
  
  <p>Thanks!</p>