Ellipsis in 100% width table

Question

My basic ellipsis style and mark-up is as follows (fiddle):

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table>
<tbody>
<tr>
    <td>Row Start (1)</td>
    <td class="ellipsis">Lectus ligula uspendisse tiam per sodales feugiat tempus ante pede vitae amet conubia raesent tincidunt n feugiat id ad mi dapibus</td>
    <td>Row End</td>
</tr>
<tr>
    <td>Row Start (2)</td>
    <td class="ellipsis">Placerat consectetuer inceptos dictum mollis adipiscing placerat sed tincidunt ullam id onec lectus sagittis consequat conubia tempus eleifend ad orbi risus hac dolor accumsan commodo a eros ed consectetuer odio feugiat dignissim dictum at ullam ligula mollis sollicitudin rutrum viverra in feugiat conubia metus uspendisse sit non imperdiet unc liquam</td>
    <td>Row End</td>
</tr>
</tbody>
</table>

... but it just makes my table stretch to fit everything in a single line and document gets a nice horizontal scroll. Same code works as expected for non-table block-level elements.

Is there a workaround that doesn't force me to use fixed widths?

How about adding `table-layout:fixed` and `width: 100%` to `table`? — Vucko, Jul 25 '14 at 07:15
See if this helps. [text-overflow: ellipsis in table-cell without width](http://stackoverflow.com/q/14826992/1331430) — Fabrício Matté, Jul 25 '14 at 07:28
Sorry, I've just found [this same question](http://stackoverflow.com/questions/14826992/text-overflow-ellipsis-in-table-cell-without-width) with an excellent answer. I don't know why I couldn't' find it before. — Álvaro González, Jul 25 '14 at 07:32

score 0 · Answer 1 · answered Jul 25 '14 at 07:23

0

http://jsbin.com/jehaxequ/1/edit

TD max width is a solution here. If you don't know the max width of td, the problem isn't easy to do with CSS, however a little jquery or javascript can be used to calculate the max width of td, and add it "live" to your element properties.

answered Jul 25 '14 at 07:23

Jacek Kowalewski

2,761
2
23
36

Thank you for your suggestion, but every time I've fiddled with JavaScript to do this kind of stuff I've ended up regretting it. It's impossible to get it right if you want to account for dynamic scripts or just window resizing. – Álvaro González Jul 25 '14 at 12:03
... whatever... your fiddle does work and it's apparently ignoring the `max-width: 300px;` style :-? – Álvaro González Jul 25 '14 at 12:06
It works, but width of td is always recalculated to percentage of a table :). – Jacek Kowalewski Jul 25 '14 at 12:11
Not in my actual mark-up :) But I need to have a look at it carefully. – Álvaro González Jul 25 '14 at 12:43
OK, no problem. This will help You: http://stackoverflow.com/questions/14765817/why-does-css-td-width-not-work – Jacek Kowalewski Jul 25 '14 at 13:43

score 0 · Answer 2 · answered Jul 25 '14 at 07:26

0

Add a max-width property.

JSBIN

answered Jul 25 '14 at 07:26

painotpi

6,894
1
37
70

Ellipsis in 100% width table

2 Answers2