Column column overflow ellipsis (width in%)

Question

I have this markup for mobile devices.

<table> <tr> <td style="width:60%"> <div class="ellipsis"> Test bla bla </div> </td> <td style="width:40%"> </td> </tr> 

CSS

 .ellipsis { width : 100%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-break: break-all; word-wrap: break-word; } 

Truncation does not work as desired; instead, the column expands depending on the content.

Table-Layout: fixed makes both columns equal.

Any suggestions? Thank you

Answer 1

Please use the following css to make css3 truncation work with tables

 table { width: 200px; /*specify a width*/ table-layout:fixed; } 

The "table-layout: fixed" property seems to be important for text trimming to work for any block-level elements within a table.