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 colum

Answer 1

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:

    

        
1.
        

            In this TD, wrapping still occurs if there is white space.
            ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
        
    
    

        
2.
        

            In this TD, wrapping will not occur, even if there is white space.
        
    

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