table { border-collapse: collapse; table-layout: fixed; display: table; } td { border: solid 1px #000; min-height: 90px; width: 90px; padding: 5px; vertical-align: top; font-size: 80%; font-weight: bold; }
Tables are deprecated. Meaning: avoid them like the bloaty plague they are.
In a very few cases, where you are actually displaying tabular data, rather than attempting to hack up a layout, they are appropriate. Not sure why you would need "minimum height" in such a case, but whatever.
To get absolute 'minimum' dimensions, you need to stick in cells stuffed with 1-pixel x whatever images (I prefer a 1x1 transparent gif).
I guess the div thing probably does it too (haven't tried it; same diff?).
It's a calendar, so I leave it to you as to whether I'm presenting tabular data (for which tables are deprecated) or hacking up a layout. My personal preference for using tables as layout is not to.
In this case, I could probably set it out with floating DIVs, but wouldn't be too surprised if the thing fell apart in some browsers.
Yes, the DIV in cell trick does work. Slightly less messy than using an IMG, but still not desirable.
But, in other news it appears that height is interpreted as a minimum height on table cells anyway, so min-height may be superfluous. I just need to check that this works.
Depends on the type of calendar - is it ones where the week/day aspect takes priority over the incremental day aspect.
For a holiday thing, when you're booking a range of dates, that's probably better list-based.
For an appointment thing, when you're booking times on days, tabular might make more sense.
But yeah, I have seen people re-implementing clearly tabular stuff with divs, and that's annoying.
Actually, the approach that Mike linked to came in for some pretty tough criticism, pretty well founded IMO.
A monthly calendar (days along the horizontal axis, weeks on the vertical) is a table layout. That's the approach that I've gone for in the end, although I'm also playing around with a list-based version on the side (although not that one) just for the sheer joy of it.
<calendar start="Jun 2010" style="display:grid;visibility:month;" weekend="false"> <event date="8-Jun-2010">Crazy repeating stuff.</event> <event date="2-Jul-2010">Something happens.</event> <event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event> </calendar>
<calendar start="today" limit="3 weeks" style="display:agenda;"> <event date="8-Jun-2010">Crazy repeating stuff.</event> <event date="2-Jul-2010">Something happens.</event> <event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event> </calendar>
table { border-collapse: collapse; table-layout: fixed; display: table; }
div.calendar { display: table; } div.week { display: table-row; min-height: 3em; } div.day { display: table-cell; width: 10em; height: 3em; text-align: right; background-color: #C0C0C0; overflow: visible; border: 1px solid #000000; padding: 0.2em; }
<div class="calendar"> <div class="week"> <div class="day"> </div> <div class="day"> </div> <div class="day">1</div> <div class="day">2</div> <div class="day">3</div> <div class="day">4</div> <div class="day">5</div> </div> <div class="week"> <div class="day">6</div> <div class="day">7</div> <div class="day">8</div> <div class="day">9</div> <div class="day">10</div> <div class="day">11</div> <div class="day">12</div> </div> <div class="week"> <div class="day">13</div> <div class="day">14<br /> <span style="color: #FF0000"> <strong>Geoff's birthday.</strong><br /> Must remember to buy him a present this year. Last year he cried like a bitch when we all forgot he'd been dropping hints about that god-awful DVD box-set...</span></div> <div class="day">15</div> <div class="day">16</div> <div class="day">17</div> <div class="day">18</div> <div class="day">19</div> </div> <div class="week"> <div class="day">20</div> <div class="day">21</div> <div class="day">22</div> <div class="day">23</div> <div class="day">24</div> <div class="day">25</div> <div class="day">26</div> </div> <div class="week"> <div class="day">27</div> <div class="day">28</div> <div class="day">29</div> <div class="day">30</div> <div class="day">31</div> <div class="day"> </div> <div class="day"> </div> </div> </div>
<div name="row-1" style="white-space:nowrap;"> <div name="col-1" style="float:left;width:100px;"> </div> <div name="col-2" style="float:left;width:150px;"> </div> <div name="col-3" style="float:left;width:40px;"> </div> </div> <div name="row-2" style="white-space:nowrap;"> <div name="col-1" style="float:left;width:100px;"> </div> <div name="col-2" style="float:left;width:150px;"> </div> <div name="col-3" style="float:left;width:40px;"> </div> </div>
Thank you. As Mr Smith observes, display:tablexxx goes to pot with some older (but still widely used) browsers, and a table actually does make sense for a calendar.
But the lack of colspan shouldn't be an impediment since the cell width is fixed, so you could just apply another class to override the generic width with another.