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
– Rakesh, Commented Jun 22, 2012 at 17:58

Hirak · Accepted Answer · 2012-06-20 10:42:18Z

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, 2012 at 10:42

Hirak

862 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rakesh Over a year ago

table-layout:fixed; is making the columns equal in size if width is given in %. Even the table width is in %, fluid design.

Collectives™ on Stack Overflow

Table column text-overflow ellipsis ( width in % )

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related