How to limit table cell height (GMail style)
I just sent this to the CSS-D discussion list
Hope you can help me with this. I want to limit a table cell height to only one line of text. My example below does not work – any height on td is simply ignored if content is long.
Problem here (according to for instance http://annevankesteren.nl/2004/01/css-tables ) is that CSS specification requires table cell to expand to a minimum height of the containing content.
So my question is: How is this solved in for instance GMail where content i only one line high (and additional overflowing content is hidden). Please share your thoughts on this, and if you could point me to any information on how to solve this.
[code lang=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I want table row to be the height of 1 text line.
1. start cell not much content 2. second cell has insanely long content that I know will always wrap
[/code]
Any help appreciated,
Jesper—
Jesper Rønn-Jensen
Capgemini Danmark A/S
http://justaddwater.dk/ (weblog)
I’ll post the results here as I find out how Google GMail does the trick. Please share any tricks that you know of here. Oh, for your information, solution must work in Internet Explorer…
UPDATE: Now working! Thanks to the information at BlakeMS blog, I now got it working (no Javascript necessary).
Now this works the same with table cells. See below and note that you must set table to have the table-layout: fixed property for it to work.
[code lang=”css”].tbl {
table-layout:fixed;
border-top: 5px solid #333;
border-collapse: collapse;
background: #fff;
}
.tbl td {
border-bottom: 1px dashed #333;
padding: 2px 5px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
} [/code]
Note that he also adds white-space:nowrap. Otherwise it won’t work. Example page – working
Technorati Tags: web standards, css, tables, google, gmail
March 11th, 2006 at 18:57 (GMT-1)
Hi,
You need to put a div inside the td and then apply the following style to it:
div {
height:10px;
overflow:hidden;
}
This will hide to rest of the content.
Hope this will help you out!
March 11th, 2006 at 20:03 (GMT-1)
Hey Lars.
Thank you very much for your feedback. I really appreciate it. Just one thing might prevent me from using your trick: The table in this particular case is generated with Java Server Faces.
See example here: MyFaces table example.
A possible workaround might then be to wrap td contents in a div via DOM scripting.
However I’d prefer a simpler solution where only CSS is involved.
March 3rd, 2008 at 01:44 (GMT-1)
I thought I’d found my fix, but this isn’t working out for me. I think the difference is that my cells have a height, but only some have more than one character of data (its a calendar).
April 29th, 2008 at 18:48 (GMT-1)
Restricting the height of the td via CSS doesn’t work since the td stretches to accomodate content. You have to wrap the content with a div or some other container.
e.g.
content
June 25th, 2008 at 17:59 (GMT-1)
Awesome. I’ve been looking for this for ages. Thank you much
PS: I just tested it and it works perfectly in IE7 FF3 and Safari
September 3rd, 2008 at 16:45 (GMT-1)
ronn, your fix dint work in my case for whatever reasons. But Lars’s fix did it. Anyways my problem got solved, thanks to your posting and lars fix. Thanks guys.
March 10th, 2011 at 21:50 (GMT-1)
This only works if your table is table-layout=”fixed”. Gmail is not fixed. All the columns are fixed width except for the Subject column which is auto. This doesn’t work when your table is 100% like gmail and when only one column is set to auto while the others are fixed.