Dlaczego elipsa CSS nie działa w komórce tabeli?

Rozważmy następujący przykład: (tutaj demo na żywo)

HTML:

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

CSS:

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

JS:

<code>$(function() {
  console.log("width = " + $("td").width());
});
</code>

Dane wyjściowe to:width = 139, a elipsa nie pojawia się.

Czego mi tu brakuje?

questionAnswers(10)

yourAnswerToTheQuestion