Especificación del ancho porcentual para las celdas de la tabla CSS

Question

Estoy tratando de crear un calendario de semana basado en HTML/CSS utilizando la pantalla CSS: estilo de celda de tabla en los divs correspondientes a cada día. Cuando especifico un ancho de porcentaje para los div del día que es mayor que 17%, los divs ocupan toda la pantalla como se esperaba (desde 7 * 17%> 100%).

jsFiddle aquí: http://jsfiddle.net/huDxZ/1/

Sin embargo, cuando especifico una anchura ciento que es el 16% o menos, los divs se comportan de manera diferente por completo, ocupando sólo una parte del ancho de la página.

jsFiddle aquí: http://jsfiddle.net/DLjnH/

Me gustaría que mi divs a día tienen cada una anchuras de aproximadamente el 14% más o menos por lo que llenar el ancho de la página y tienen los mismos tamaños. Desafortunadamente, un ancho del 14% se ve aún peor.

jsFiddle aquí: http: //jsfiddle.net/YB5bY/

Qué está causando este comportamiento inesperado? ¿Hay alguna manera de evitarlo? Necesito especificar explícitamente los anchos porque eventualmente me gustaría que los días del calendario se expandan con el mouseover.

Por favor, no hay soluciones que involucren flotadores.

Gracias!

Answer 1

reglas CSS porcentaje valores siempre es relativo al valor de la misma propiedad del padre.
Trate de añadir una anchura explícita al contenedor:

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

La puede utilizar 14% de los elementos ".PRIMER":

DEMO

Answer 2

Bueno, puede ser una locura, pero yo usaría una mesa para una cosa así ...

No todas las tablas son malos, sólo los que se utilizan para el diseño ...

Answer 3

No puedo decir la razón, pero si fuerza al contenedor div a tener un ancho del 100%; los comportamientos de los dos casos son idénticos.

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

Versión actualizada: http://jsfiddle.net/DLjnH/1/

Answer 4

Sus anchos de celda de la tabla son en relación con el ancho de los padres, sin embargo, los padres con es auto/no definido. Agregue width: 100%; a su definición de css #calendar para que se comporten correctamente.