views:

80

answers:

2

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;}
+1  A: 

Are you looking for colspan?

Jeriko
Not really, My table headers are days of the week, if there's nothing in mon-fri I don't want them to be wide at all but if there's and event in Saturday it should be pretty wide. A normal table just spaces them to be all equal widths.with colspan I can't have event A going on fri - sat with just event B on sat.
Jack
You can, if eventA is in a cell by itself and eventB in a cell by itself - then you can use different colspans.
ANeves
Care to share your HTML? Might help a bit more..
Jeriko
+1  A: 

Well if you specify a min-width and a min-height in a css file or in inline css or in the div tag (bad practice) then your collumns and rows will have a minimum width and height but can expand as necessary.

What is the result if you try it this way? Is it possible that you specified a width for the whole table? If yes, then the space has to be filled somehow. Maybe that could make the other collumns wider then needed. (Someone correct me if I'm wrong). Maybe you could try make the content of one cell really long and see what happens.

TheMorph
That's what I thought I could do but the table-cells will just go ahead and resize it's widths to be evenly spaces.
Jack
Well maybe you can post some code (most interesting would be the css part) and/or a screenshot? It seems a bit strange that this won't work.
TheMorph
Take a look at this http://www.freeimagehosting.net/uploads/b72701b049.png
Jack
You gave your cols only a min-height, but you want a min-width too and not a fixed one.
TheMorph
So I did. You were a great help. Thank you.
Jack
Don't mention it! ;)
TheMorph