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.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
table{
width:300px;
border:1px dashed red;
}
td{
vertical-align: top;
background-color: #dfc;
height: 10px; /* table cell does not obey this height */
}
</style>
</head>

<body>
<p>I want table row to be the height of 1 text line.</p>
<table>
<tr>
<td>1. start cell not much content</td>
<td>2. second cell has insanely long content that I know will always wrap</td>
</tr>
</table>
</body>
</html>

Any help appreciated,
Jesper


Jesper Rønn-Jensen
Capgemini Danmark A/S
http://justaddwater.dk/ (weblog)

Example page – not working

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.

.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;
 }

Note that he also adds

white-space:nowrap

. Otherwise it won’t work. Example page – working

Technorati Tags: , , , ,

7 Responses to “How to limit table cell height (GMail style)”

  1. Lars Gundersen Says:

    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!

  2. Jesper Rønn-Jensen Says:

    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.

  3. Mike Says:

    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).

  4. Austin Says:

    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

  5. patrick Says:

    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

  6. ramak Says:

    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.

  7. Rich Says:

    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.