How to set CSS text-overflow in a table cell?

To set CSS text-overflow in a table cell, we set the max-width of the cell.

For instance, we write

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

to set the max-width to 100px set the max width of the cells.

And we add the text-overflow: ellipsis; and white-space: nowrap; to keep the text to one row and put ellipsis after the truncated text.

We then add overflow: hidden; to hide text overflowing outside the cells.