Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Html Table

Fluid Table With Td Nowrap & Text-overflow?

Post a Comment
Here is my problem HTML:
Copy

Solution 2:

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.

<tableclass="myTable"><tr><tdclass="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td><tdclass="td2"><div>Content 2</div></td><tdclass="td3"><div>Content 3 also so very lonnnnngggg</div></td></tr></table><tableclass="myTable"><tr><tdclass="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td><tdclass="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td><tdclass="td6"><div>Content 3</div></td></tr></table>

JSfiddle

Solution 3:

My full example :

<head><style>table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style></head><body><tableborder="1"><tr><td>CHAMPIONNAT</td><td>CHAMPIONNAT</td><td>CHAMPIONNAT</td><td>CHAMPIONNAT</td><td>CHAMPIONNAT</td><td>CHAMPIONNAT</td></tr></table></body>

Solution 4:

for me, 

<styletype='text/css'>table {
 white-space: normal;
}
</style>

worked...

Post a Comment for "Fluid Table With Td Nowrap & Text-overflow?"

Menu Halaman Statis