tablas - tamaño fijo celdas tabla html

Especificando ancho de porcentaje para celdas de tabla CSS

Question

Estoy tratando de crear un calendario semanal basado en HTML / CSS usando CSS display: estilo de tabla-celda en los divs correspondientes a cada día. Cuando especifico un porcentaje de ancho para los divs de día que es mayor que 17%, los divs llenan toda la pantalla como se esperaba (ya que 7 * 17%> 100%).

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

Sin embargo, cuando especifico un porcentaje de ancho que es 16% o menos, los divs se comportan de manera totalmente diferente, ocupando solo una parte del ancho de la página.

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

Me gustaría que mis divs diurnos tuvieran anchos de alrededor del 14% para que llenen aproximadamente el ancho de la página y tengan los mismos tamaños. Desafortunadamente, un ancho de 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 expandieran con el mouseover.

Por favor, no hay soluciones con flotadores.

¡Gracias!

Answer 1

Bueno, puedo estar loco, pero usaría una mesa para tal cosa ...

No todas las tablas son malas, solo las que se usan para el diseño ...

Answer 2

Los anchos de celda de la tabla son relativos al ancho de los padres, pero los padres con es automático / indefinido. Añadir width: 100%; a tu #calendar definición de css para que se comporten correctamente.

Answer 3

Los valores de porcentaje de las reglas de CSS siempre son relativos al valor de la misma propiedad del padre.
Intenta agregar un ancho explícito al contenedor:

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

Puedes usar el 14% para los elementos ".day":

DEMO

Answer 4

No puedo decirle la razón, pero si obliga a la div contenedores 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/