Misha Moroshko Misha Moroshko - 10 months ago 23
HTML Question

Why doesn't CSS ellipsis work in table cell?

Consider the following example: (live demo here)


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


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


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

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

What am I missing here?


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/