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>

我希望第一行的中心单元格的内容宽度固定，第二行的每个单元格宽度为 100px。

如果我做错了什么或遗漏了一些需要为 IE 和 Chrome 添加的内容，请现在告诉我

4

3 回答 3

1

既然您希望每天都有 100 像素的固定宽度，那么整个日历应该一直是 700 像素吗？

如果我的假设是正确的，那么改变

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

如果您希望天的宽度始终为 100 像素，则必须添加：

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

因此，当您调整窗口大小时，日历不会拉伸。

于 2012-06-19T22:48:33.017 回答
1

我认为帕特里克说得对。我清理了.header。 http://jsfiddle.net/M7Apt/

于 2012-06-19T22:50:15.437 回答