I'm using an HTML table for a calendar and I want to fill the cells with various events from my database. Usually they will land on weekends but some will run for long weekend, bank holidays or even the odd week day.
How can I get my tables columns to expand and shrink accordingly. I'd like to avoid the use of javascript if possible.
If this can't be done I'm going to need a tutorial to help me get my head around how to make div's positioning behave.
cheers
Edit some clarification: Picture it like 5 columns, col 1-3,5 = 30px col 4 = 250px
But I can't always know before php draws the table how width they should be. because events can be any day(column).
Final Edit: Looks like I was trying too hard with my CSS. http://www.freeimagehosting.net/uploads/c900b5c77b.png
I got a result I'm happy with by following a suggestion below and removing my width declarations and changed the cells to max-width. Probably going have all the fun of making that compatible later :(
This is the Css I went with. td.calendar-day-np are days excluded from the beginning/end of this month.
/* calendar */
table.calendar{width:100%;border-left:1px solid #999;}
tr.calendar-row{}
td.calendar-day{min-height:80px;position:relative;}* html div.calendar-day{height:80px;}
td.calendar-day:hover{background:#F9F9FA;}
td.calendar-day-np{background:#F9F9FA;min-height:80px;}* html div.calendar-day-np{height:80px;}
td.calendar-day-head{text-align:center;padding:5px;font-weight:bold;background:#ccc;border-bottom:1px solid #999;border-top:1px solid #999;border-right:1px solid #999;}
div.day-number{background:#ccc;padding:5px;color:#fff;font-weight:bold;float:right;margin:-5px -5px 0 0;width:20px;text-align:center;}
/* shared */
td.calendar-day,td.calendar-day-np{max-width:200px;padding:5px;border-bottom:1px solid #999;border-right:1px solid #999;}