Fluid table with td nowrap & text-overflow?

Answer 1

Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:

div { width: 0; min-width: 100%; }

The main trick is giving the width something other than auto/percent, and using a min-width of 100%;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }

The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.

    

        
Very very very long text Very very very long text Very very very long text Very very very long text
        
Content 2
        
Content 3 also so very lonnnnngggg
    



    

        
Very very very long text Very very very long text Very very very long text Very very very long text
        
Content 2 has very very very many texts in a very very very long way
        
Content 3
    

JSfiddle