This isn’t going to be particularly interesting or new for the majority of people, but as I spent a good few hours finally figuring out how one of the subtle gmail perfections works it seemed like it was worth sharing.
The goal was to be able to re-produce a table layout that allowed a column’s content to have its overflow hidden without any white space breaking / etc when the browser is re-sized, as is what happens with the subject column of the gmail list view:
There isn’t very much magic to it, but the key seems to be using a table-layout: fixed css definition for the table as a whole and then only specifying column width values for the columns that shouldn’t have their content overflow hidden and tucked away behind the rest of the content.
.grid { table-layout: fixed;}
.grid * td {
empty-cells: show;
overflow: hidden;
width: 100%;
}
The best example is probably going to be just seeing a small demo of the technique - which you can view here.
The only major drawback I’ve found is that you can’t really have any table row blocks that span multiple columns appear in the table before your core content - otherwise firefox locks all of the content in to that size and trying to make it work becomes slightly hellish. I solved this by just creating a separate table to live above my grids to hold this content so as not to anger the firefox layout gods. (ie actually handles it perfectly either way.)
-
1
Pingback on Aug 22nd, 2007 at 11:14 pm
[...] Kuhnert has a tip that he learned from looking at Gmail and reproducing a table layout that allowed a column’s [...]
Leave a Comment
Latest Entries
- updated foxylicious extension for Firefox 3
- how to fix butt ugly ubuntu hardy heron fonts
- Where are our java leader’s opinions on closures?
- Tapestry 4.1.5 Released && various Tacos project releases (like Seam / jQuery support)
- painting by numbers, or how html cowards hide behind CSS
- Rails component envy
- OGNL 2.7.2 Released
- news flash - Swing is a terrible API to emulate in web development
- hip hop is neat
- good closures, bad closures
Aug 23rd, 2007 at 2:46 am
very interesting realisation!
Aug 23rd, 2007 at 3:09 am
uhm..
white-space:nowrap; overflow: hidden;?
Aug 23rd, 2007 at 4:55 am
Wow, looks so simple.
I’ve tried something similar cross-browser for a while, ended up using javascript (but includes an ellipsis).
Aug 23rd, 2007 at 6:27 am
The example does not work
Aug 23rd, 2007 at 6:52 am
Second that the example does not work.
Aug 23rd, 2007 at 7:00 am
As much as I do normally appreciate bug reports, the reports coming in so far are about as helpful as well I don’t know….
Maybe you have a browser version/platform combined with expected vs. actual results?
Aug 23rd, 2007 at 7:58 am
OK - when I click on a link in the demo, I get brought to a nonexistant page on your site (http://blog.opencomponentry.com/blah). Clicking a check box seems to do nothing. Clicking on “title” brings me to that same nonexistant page.
Aug 23rd, 2007 at 7:59 am
At least, I thought it was going to expand? I guess, looking at the source, that all you wanted was the table alignment?
If so, I apologize. Though that wasn’t exactly clear from the article.
Aug 23rd, 2007 at 8:05 am
@Bill
Yeah, sorry for the confusion. I just sort of cobbled together an example from the project I’m working on and was too lazy to create a proper “clean” demo page. The first column is the one with the underflow stuff happening.
Aug 23rd, 2007 at 8:51 am
great work! very useful!
Aug 23rd, 2007 at 10:12 pm
Looks good. The only thing I’d suggest for demonstration purposes is to apply the treatment to all the columns (looks good except for the second column). It is obvious that it works, but the full effect could be realized by treating the second column (name).
Thanks for the tip. The tutorial does the trick and works perfect in my own environment. It is a small detail in GMail that many people probably don’t notice.
Nov 6th, 2007 at 5:15 pm
really cool css-trick, thanks!