Question

Consider the following example: (live demo here)

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

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

What am I missing here?

Answer 1

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/