Problem
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 http://jsfiddle.net/fd3Zx/5/.
Answered by Misha Moroshko
Solution #2
It’s also crucial to include
table-layout:fixed;
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).
jsfiddle.
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{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
Answered by vsync
Post is based on https://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell