Table column text-overflow ellipsis ( width in % )

Question

I have this markup for mobile.

<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;
}

The truncation doesn't work as desired, instead the column expands depending on content.

Table-Layout : fixed makes both the columns equal.

Any suggestions ? Thanks.

Answer 1

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

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

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