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.

Yep, Brett. After lots of searching and all, I dropped table and using ul, it works like charm. — Rakesh, Jun 22 '12 at 17:58

score 5 · Answer 1 · answered Jun 20 '12 at 10:42

5

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.

answered Jun 20 '12 at 10:42

Hirak

86
2

table-layout:fixed; is making the columns equal in size if width is given in %. Even the table width is in %, fluid design. – Rakesh Jun 20 '12 at 11:24

Table column text-overflow ellipsis ( width in % )

1 Answers1

Linked