Thursday, August 23rd, 2007

Learning from Gmail

Category: CSS

We can always learn from popular Ajax applications such as Gmail. In fact, browser vendors often fill their test suite with some of the big sites out there, and groan when they have to implement a bug to be backwards compatible :)

Jesse Kuhnert has a tip that he learned from looking at Gmail and reproducing 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.

  1. .grid { table-layout: fixed;}
  2.  
  3. .grid * td {
  4.    empty-cells: show;
  5.    overflow: hidden;
  6.    width: 100%;
  7. }

The best example is probably going to be just seeing a small demo of the technique – which you can view here.

There are all kinds of fun things hidden, normally with crazy tables ;)

Posted by Dion Almaer at 1:14 am
13 Comments

++++-
4.1 rating from 41 votes

13 Comments »

Comments feed TrackBack URI

As using tables sounds not a bad idea for this kind of data, I saw that grid like layouts just using divs instead. I can remember that when I’ve tried implementing a grid layout with tables, I had problems with controlling the column widths/paddings properly. Maybe i was just lame, I don’t know.

Anyway, you can do the same with plain divs, too:
[div style=”background: #ddd; float: left; width: 100px; overflow: hidden; white-space: nowrap;”]
Take it eeeeeeaaaaaaassyyyyyyyyy!
[/div]

Comment by András Bártházi — August 23, 2007

One thing I noticed with Opera/old Safari is that the 100% width in the td caused some serious rendering issues. Dunno if you noticed that too.

Comment by Lindsey Simon — August 23, 2007

Why is it defined as “.grid * td”? Would not the “.grid td” be just as good?

Comment by Joseph Stalin — August 23, 2007

@András Bártházi: problem with DIVs is that you can’t make grid like one in GMail (with one free-sized column) without really bad and big CSS hacks. So tables rulez

Comment by anonymous — August 23, 2007

Wait, we’re getting a tip about fixed table layout? What’s next, clearing floats with clear: both? While it’s a good tip, it’s not exactly news.

Comment by tuan — August 23, 2007

I didn’t understand how to use the overflow effectively. I want to make my tables appear just like gmail did. on one line only. Could you show an example of this magic

Comment by amin — August 23, 2007

here = http://blog.opencomponentry.com/grid.html

Comment by Janos — August 23, 2007

And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat

Comment by Scott — August 23, 2007

One more thing that is missing from that code: {white-space:nowrap;}

I don’t think it works otherwise

Comment by Scott — August 23, 2007

@Scott {text-overflow:ellipsis;} ? I’ve never used that one before. thanks =)

p.s. I do have some white-space: nowrap mixed in there in different places – it’s possible I f-ed up the demo page snippet I put together though.

Comment by Jesse Kuhnert — August 23, 2007

“And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat”

Have no idea what you’re talking about Janos (3 comments up), but as a math guy, it just sounds funny… Microsoft didn’t add a text-overflow:ellipsis; did they??? Ha

-if they really did, I retract my statement and ask what it is

I had the worst time today with table widths and scriptaculous Effect.* (* being any effect). With tables, for some reason, hiding things and then showing them again makes Safari (and only Safari) forget what their width was. Is this similar to “resizing a browser window”, since dimensions of a table are being changed?

Comment by Chad — August 24, 2007

Joseph: you were right, I was not able to do something like this. Anyway, it’s possible to use JavaScript to set the width of the column. I wouldn’t say if that’s better than this solution, so it was great to read about it.

Chad: I don’t really understand your laugh, I guess you hadn’t got that “ellipsis” means “…” and nothing like a geometric shape here.

Comment by András Bártházi — August 25, 2007

But it also need to specify the cols as well

Comment by amin — October 1, 2007

Leave a comment

You must be logged in to post a comment.