Coder Perfect

Why is it that CSS ellipsis doesn’t work in table cells?


Consider the following illustration: (live demo here)

The result is width = 139, and the ellipsis is missing.

I’m not sure what I’m missing here.

Asked by Misha Moroshko

Solution #1

Apparently, adding:

td {
  display: block; /* or inline-block */

as well as resolving the issue

Setting table-layout: fixed; for the table, as well as its width, is another option. For instance, take a look at

Answered by Misha Moroshko

Solution #2

It’s also crucial to include


Onto the enclosing table, which also works in Internet Explorer 9 (if you use max-width).

Answered by streetlight

Solution #3

You can use td display: block; as previously said, however this contradicts the purpose of utilizing a table.

Table table-layout: fixed; can be used, although you may want it to behave differently for specific columns.

Like a result, the easiest method to do what you want is to wrap your text in a div> and apply CSS to the div> (rather than the td>) as follows:

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

Answered by marcosbdm

Solution #4

If you use max-width instead of width, the table will automatically compute the width.

Even in Internet Explorer 11 (IE11), it works (with ie8 compatibility mode).


Answered by Asherah

Solution #5

I found the following method to generate satisfactory results for tables with dynamic width. Each th> that wants to use trimmed-text should have an inner wrapping element that wraps the thcontents >’s and allows text-overflow to work.

The element’s width will be effectively “constrained” to the viewport width (browser window), resulting in responsive content cutting. Set the vw units to a figure that meets your needs.

th{ max-width:10vw; }

th > .wrap{ 

Answered by vsync

Post is based on