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.