0

次のようなテーブルがあるとしましょう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link href="Theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="Calendar" style="float:right;">
        <div id="calHeader">
            <div class="header">
                <div></div>
                <div class="title">awr awrawra</div>
                <div></div>
            </div>
        </div>

        <div id="calDays">
            <div id="calDaysWeek">
                <div>Monday</div>
                <div>Tuesday</div>
                <div>Wednesday</div>
                <div>Thursday</div>
                <div>Friday</div>
                <div>Saturday</div>
                <div>Sunday</div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

<style type="text/css">
    #Calendar
    {
        border-collapse:collapse;
    }
    #Calendar div
    {
        border: solid 1px black;
        vertical-align:middle;
        text-align:center;
    }

    #calHeader,
    #calDays
    {
        display:table;
        width:100%;
    }
    #calHeader > div, #calDays > div
    {
        display:table-row;
    }
    #calHeader > div > div,
    #calDays > div > div
    {
        display:table-cell;
    }
    #calHeader > div > div
    {
        width: 50%;
    }

    #calHeader .header .title
    {
        width:inherit;
        white-space:nowrap;
    }

    #calDaysWeek div
    {
        width: 100px;
    }

    #calDays .day div
    {
        height:50px;
        text-align:right;
        vertical-align:text-top;
    }
</style>

最初の行の中央のセルをコンテンツの幅で固定し、2 行目の各セルの幅を 100px にしたい。

何か間違ったことをしている場合や、IE と Chrome に追加する必要があるものが不足している場合は、今すぐお知らせください。

4

3 に答える 3

1

毎日の固定幅を 100px にしたいので、カレンダー全体を常に 700px にする必要がありますか?

私の仮定が正しければ、変更してください

#calHeader,
#calDays
{
    display:table;
    width:700px;
}
于 2012-06-19T22:43:15.240 に答える
1

日の幅を常に 100px にしたい場合は、以下を追加する必要があります。

#Calendar
{
     border-collapse:collapse;
     width:700px;
}

ウィンドウのサイズを変更しても、カレンダーは伸びません。

于 2012-06-19T22:48:33.017 に答える
1

パトリックはそれを正しく理解したと思います。.header をクリーンアップしました。 http://jsfiddle.net/M7Apt/

于 2012-06-19T22:50:15.437 に答える