html - このカレンダーウィジェットをHTML/CSSでコーディングできませんが、誰か試してみることができますか？

Question

私は小さな仕事を与えられましたが、私が試みた方法でそれを完了することができません。HTMLとCSSで設計したこのカレンダーウィジェットをコーディングするように求められましたが、使用する必要のあるテーブルまたはdivがわかりません。

カレンダーは次のようになります。

これが私が今のところそれを設計した方法です：

このサイトのライブデモは、私が行ったことのコードと同様に、ここにあります：http: //trendgfx.com/projects/comet-tavern/

私を助けてください。

Answer 1

あなたがとを取り除くと、float:leftあなたdisplay:inline-blockはずっと近くに#archive-calender th {なります。#archive-calender td {

次に、セル間のギャップを取得するために、オンに設定border-collapseしていくつかを投入します。separate#archive-calender {border-spacing:3px

最後に、少しだけセル内に呼吸padding:2pxの#archive-calender td {余地を与えます。

HTH

編集はセルの背景を忘れました。

background-colorいくつかまたはbackground-imageに追加する#archive-calender td {と、素敵な灰色のセルが表示されます。