Variable width columns in a table
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;}
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.
Are you looking for colspan
?
精彩评论