How to get text-overflow:ellipsis to work in a table?

Question

css

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    width: 14.285714286%;
    box-sizing: border-box;
}
th {
    vertical-align: middle;
}
td {
    height: 100px;
    vertical-align: top;
    padding: 4px;
}
.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.event-list li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span.day {
    float: right;
    font-weight: bold;
}
.other-month .day {
    color: #888;
}
td.other-month {
    background-color: #eee;
}
body {
    font-family: sans-serif;
    font-size: 10pt;
}

html

<td class="day-cell current-month"><span class="day">2</span><ul class="event-list"><li>1-4 FM - Fishing</li></ul></td>

I've set the width of each of the table cells to 14.28% but the <li>s push the table cells out even though I have overflow:hidden on them. I don't want the list-items to stretch the cells; I want them to show an ellipsis if the line is to long. Is that possible?

I do see ellipses (i.imgur.com/p6LDgDp.jpg) or something else is expected? — Comfortably Numb
– Comfortably Numb, Commented Jun 5, 2014 at 18:36
@YuriyGalanter Yes. All the table cells should have the same width. Those ellipses only appear if they go under the date number. — mpen
– mpen, Commented Jun 5, 2014 at 18:41

Arbel · Accepted Answer · 2014-06-05 18:43:42Z

2

Simply add table-layout: fixed; to table

Demo: http://jsfiddle.net/Y8Zx5/

Explanation: This will force the table cells to have the specified width of 14.285714286%; forcefully, hence preventing the table cells to grow in width with the content, and resulting in the ellipsis to occur in your desired width.

edited Jun 5, 2014 at 18:43

answered Jun 5, 2014 at 18:38

Arbel

31.1k2 gold badges31 silver badges31 bronze badges

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

1 Comment

mpen Over a year ago

Perfect! Didn't know about that property.

DivineChef · Accepted Answer · 2014-06-05 18:42:54Z

1

Did you try adding text-overflow: ellipsis;?

I have this working with bootstrap at THIS DEMO LINK

It uses the following CSS

.setWidth {
 max-width: 80px;
 }

.concat>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
}

For this HTML

<td class="setWidth concat"><div>Some text for table cell here</div></td>

answered Jun 5, 2014 at 18:42

DivineChef

1,2011 gold badge10 silver badges29 bronze badges

1 Comment

mpen Over a year ago

Did you even look at the CSS?

Collectives™ on Stack Overflow

How to get text-overflow:ellipsis to work in a table?

css

html

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

css

html

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related