CSSテーブルセルのパーセンテージ幅を指定する

Question

CSS表示を使用してHTML/CSSベースの週カレンダーを作成しようとしています。毎日のdivにテーブルセルスタイルを設定しています。 17％を超える日のdivのパーセント幅を指定すると、divは、7 * 17％> 100％であるため、期待通りに画面全体を塗りつぶします。ここ

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

私は16％以下であるパー​​セント幅を指定するときしかし、div要素は、ページ幅の一部だけを取り上げ、全く異なる挙動を示します。ここ

jsfiddle：http://jsfiddle.net/DLjnH/

彼らは大体ページの幅を埋めると同等の大きさを持っているので、私は約14％の幅を持ってそれぞれに私の一日のdivをしたいと思います。残念ながら、14％の幅はさらに悪化しています。ここ

jsfiddleます。http：この予期しない動作を引き起こしている何//jsfiddle.net/YB5bY/

？その周りには道がありますか？私は明示的に幅を指定する必要があります。なぜなら、最終的にはカレンダーの日付をマウスオーバーで拡大したいからです。

フロートを含む解決策はありません。

ありがとうございます！

Answer 1

CSSルールの割合...、レイアウトに使用ものだけ悪です

ありません値は常に親の同じプロパティの値からの相対値です。コンテナに明示的な幅を追加
してみてください。

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

ザ・あなたは「day以下」の要素に14%を使用することができます。

DEMO

Answer 2

まあ、私は夢中になるかもしれないが、私はそのようなことのためにテーブルを使用することになり...すべてのテーブルが

Answer 3

私はあなたの理由を教えてくれますがあればすることはできませんコンテナdivが100％幅を持つように強制すると、2つのケースの振る舞いは同じになります。

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

更新版：http://jsfiddle.net/DLjnH/1/

Answer 4

あなたの表のセルの幅が両親の幅を基準にしている、まだ持つ親は、オート/未定義です。それらが正しく動作するように、あなたの#calendar CSS定義にwidth: 100%;を追加してください。