Misha Moroshko Misha Moroshko - 7 months ago 6
HTML Question

Why doesn't CSS ellipsis work in table cell?

Consider the following example: (live demo here)

HTML:

<table>
<tbody>
<tr><td>Hello Stack Overflow</td></tr>
</tbody>
</table>


CSS:

td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}


JS:

$(function() {
console.log("width = " + $("td").width());
});


The output is:
width = 139
, and the ellipsis doesn't appear.

What am I missing here?

Answer

Apparently, adding:

td {
  display: block; /* or inline-block */
}

solves the problem as well.


Another possible solution is to set table-layout: fixed; for the table, and also set it's width. For example: http://jsfiddle.net/fd3Zx/5/

Comments