Specificare la larghezza percentuale per le celle della tabella CSS

Question

Sto provando a creare un calendario settimanale basato su HTML/CSS utilizzando la visualizzazione CSS: lo stile della tabella-cella sui div corrispondenti a ciascun giorno. Quando si specifica una larghezza percentuale per le div giornaliere maggiore del 17%, i div riempiono l'intero schermo come previsto (dal 7 * 17%> 100%).

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

Tuttavia, quando ho specificare una larghezza per cento che è del 16% o meno, il div si comportano in modo completamente diverso, occupando solo una parte della larghezza pagina.

jsfiddle qui: http://jsfiddle.net/DLjnH/

vorrei che la mia div al giorno per ogni hanno larghezze circa il 14% in modo da circa riempire la larghezza della pagina e hanno uguali dimensioni. Sfortunatamente, una larghezza del 14% sembra ancora peggio.

jsfiddle qui: http: //jsfiddle.net/YB5bY/

cosa sta causando questo comportamento imprevisto? C'è un modo per aggirarlo? Devo specificare esplicitamente le larghezze perché alla fine vorrei che i giorni del calendario si espandessero al passaggio del mouse.

Per favore, nessuna soluzione riguardante i galleggianti.

Grazie!

Answer 1

regole CSS percentuale i valori sono sempre relativi al valore della stessa proprietà del genitore.
Prova ad aggiungere una larghezza esplicito al contenitore:

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

La si può usare 14% per gli elementi ".Day":

DEMO

Answer 2

Beh, io posso essere pazzo, ma vorrei utilizzare una tabella per una cosa del genere ...

Non tutti i tavoli sono cattivi, solo quelli utilizzati per il layout ...

Answer 3

Non si può dire la ragione, ma se si forza il contenitore div ad avere il 100% di larghezza in cui i comportamenti dei due casi sono identici.

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

Versione aggiornata: http://jsfiddle.net/DLjnH/1/

Answer 4

vostri larghezze delle celle della tabella sono relativi alla larghezza di genitori, ma i genitori con è Auto/indefinito. Aggiungi width: 100%; alla tua definizione di css #calendar perché si comportino correttamente.