How To Make CSS Ellipsis Work on a Table Cell
Solution with the CSS display property
To make an ellipsis work on a table cell, you can use the CSS display property set to its "block" or "inline-block" value.
In our example below, besides the display property, we set the text-overflow to "ellipsis", use the "nowrap" value of the white-space property, set the overflow to "hidden". Also, we specify the width and border of our <td> element.
Example of adding an ellipsis on a table cell with the CSS display property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
td {
display: block;
border: 2px solid #000;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Hello World</td>
</tr>
</tbody>
</table>
</body>
</html>Result
| Hello World |
Solution with the CSS table-layout property
Another possible way of making an ellipsis work on a table cell is using the CSS table-layout property with its "fixed" value on the <table> and specifying its width.
Example of adding an ellipsis on a table cell with the CSS table-layout and width properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
table-layout: fixed;
width: 60px;
}
td {
border: 2px solid #000;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Hello World</td>
</tr>
</tbody>
</table>
</body>
</html>