How do you make table cells show as much text as fits in one line, like GMail and Google Reader?

Question

What is the best way to make a table (not necessarily using the table tag) where each row has a fixed height and fills the entire available horizontal space and one of the columns has a dynamic width that shows as much text as possible without line breaking? Like Gmail and Google Reader.

I really like that way of presenting information. The expandable fixed height row is a good way to scan through a list of data, IMHO.

Answer 1

See: http://jsfiddle.net/gtRnn/

<p>What is the best way *snip*</p>

p {
    border: 1px dashed #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

Each property is doing something useful:

• white-space: nowrap forces the text to stay on one line.
• overflow: hidden stops this.
• text-overflow: ellipsis works in "all browsers", except Firefox (support is planned)
• border is there for no reason.

Answer 2

The other answers don't work within a table as seen here: http://jsfiddle.net/gtRnn/8/ - The link also contains the right way to do it.

The solution is to set the table-layout style on the table to fixed and to give each column a percent or absolute width. table-layout: fixed; tells the browser not to calculate the table's width based on the contents but from explicit widths given to each cell.

Working Example: http://jsfiddle.net/gtRnn/8/

Code:

<style type="text/css">
    .my-table {
        /* This is important for ellipsis to work in tables.
           Don't forget to explicitly set the widths on all columns. */
        table-layout: fixed;
        width: 100%;              /* The table must be given a width. */
    }

    .overflow-ellipsis {
        overflow: hidden;        /* Ellipsis won't work without this. */
        text-overflow: ellipsis; /* The most important part */
    }
</style>

<table border="1" class="my-table">
    <tr>
        <td width="10%">1.</td>
        <td width="90%" class="overflow-ellipsis">
            In this TD, wrapping still occurs if there is white space.
            ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
        </td>
    </tr>
    <tr>
        <td width="10%">2.</td>
        <td width="90%" class="overflow-ellipsis" style="white-space:nowrap;">
            In this TD, wrapping will not occur, even if there is white space.
        </td>
    </tr>
</table>

Mixing percent widths and absolute width's doesn't work correctly (in Google Chrome at least).