Home/ Questions/Q 8096305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T21:24:44+00:00

Let’s say I have following table like this <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0

Let’s say I have following table like this

<!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>

I want the center cell of first row is fixed with its content in width, and each cell in second row is 100px in width.

Please let me now if I am doing something wrong or missing something which needs to be added for IE and Chrome

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you want every Day to have a Fixed Width of 100px the whole calendar is supposed to be 700px at all time?

    If my assumption is right then change 

    #calHeader,
#calDays
{
    display:table;
    width:700px;
}
    • 0