CSS text-overflow: ellipsis in Table

Question

I have a Table

<table class="tbl" border="1">   
    <tr>
        <td width="20%"><span class="spn">column one is a long one</span></td>
        <td width="60%"><span class="spn">column two</span></td>
        <td width="20%"><span class="spn">column three is the longest of all columns</span></td>
    </tr>
</table>

and CSS-Settings:

.spn
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: inherit;
  color: red;    
}

.tbl
{
  width: 300px
}

I want the first and third column to be 20% width and the second should be 60% of the 300px table width. The text should be fill the full td and end with ... at the end. How to achieve this?

http://jsfiddle.net/8jgmnyn5/

What about using jquery or javascript? In this way it is not that hard to solve. Or you want to achieve this with pure css? — d_z90
– d_z90, Commented Apr 27, 2015 at 13:41
possible duplicate of Why doesn't CSS ellipsis work in table cell? — Chris Spittles
– Chris Spittles, Commented Apr 27, 2015 at 13:49
@ChrisSpittles Not a duplicate. This user has already solved the problem of the ellipsis. — Mr Lister
– Mr Lister, Commented Apr 27, 2015 at 13:51

Mr Lister · Accepted Answer · 2015-04-27 13:46:53Z

4

You have two problems.

For the table, you'll need table-layout:fixed. Otherwise it will prioritise displaying all the contents over the given column widths.
The spans have width:inherit, but the table columns have widths like 20%, so the spans will be 20% of 20%, which I'm sure is not what you meant. So get rid of the width on the spans. display:block type elements don't need widths.

.spn {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: inherit;*/
  color: red;    
}

.tbl
{
  width: 300px;
  table-layout:fixed;
}

Then the result will look like this fiddle.

answered Apr 27, 2015 at 13:46

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Doml The-Bread · Accepted Answer · 2015-04-27 13:42:56Z

0

You want something like this?

http://jsfiddle.net/8jgmnyn5/2/

your altered css looks like this:

.spn {
  display: block;
  color: red;    
}

.spn:after {
    content: "…";
}

answered Apr 27, 2015 at 13:42

Doml The-Bread

1,7911 gold badge12 silver badges19 bronze badges

1 Comment

fubo Over a year ago

almost, i want to avoid newline with white-space: nowrap; - the text can be cut off when it doesn't fit

Collectives™ on Stack Overflow

CSS text-overflow: ellipsis in Table

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related