CSS display: table-cell ignores overflow and width

Question

The table cell #t2 does not size correctly:

HTML:

<div id="table">
    <div id="t1">a</div>
    <div id="t2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div id="t3">a</div>
</div>

CSS:

body{
    margin: 0;
}
#table{
    display: table;
    width: 100%;
}
#t1{
    display: table-cell;
    background-color: red;
}
#t2{
    display: table-cell;
    background-color: green;
}
#t3{
    display: table-cell;
    background-color: blue;
}

Expected result:

enter image description here

How to hide text in #t2 when it is too long?

See, this is my desired result and the text of # t2 here is short: jsfiddle.net/wTtsV/1 if the length of the text exceeds 100% #t2, happens that it lengthens such as here: jsfiddle.net/wTtsV — user2769623
– user2769623, Commented Sep 11, 2013 at 16:57
100% of #t2, see this picture: i42.tinypic.com/n1patu.png, I would like this result instead of jsfiddle.net/wTtsV — user2769623
– user2769623, Commented Sep 11, 2013 at 17:05
The dots at the end there because the text is too long and cause the elongation of the table, it would not be long 100% as I desire, but more! — user2769623
– user2769623, Commented Sep 11, 2013 at 17:07
100% of t2 = t2, it's self-referential. That's why you need to set a maximum width in pixels, not percent. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Sep 11, 2013 at 17:11

Fernando Gm · Accepted Answer · 2014-01-29 11:24:25Z

42

I had exactly the same problem, and I got a nice solution. Add table-layout: fixed; to your id table:

#table{
    display: table;
    width: 100%;
    table-layout: fixed;
}

Have fun! :D

answered Jan 29, 2014 at 11:24

Fernando Gm

1,1919 silver badges13 bronze badges

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

1 Comment

oucil Over a year ago

Much better (and correct) solution. For those looking, here are some great use cases: css-tricks.com/fixing-tables-long-strings

Joris Lindhout · Accepted Answer · 2013-09-11 19:50:12Z

9

Fiddle: http://jsfiddle.net/wTtsV/7/

word-break:break-all;

answered Sep 11, 2013 at 19:50

Joris Lindhout

2052 silver badges9 bronze badges

1 Comment

IvanL Over a year ago

It's not an exact solution but it's the only viable CSS solution. Never used that property before but I'll be sure to remember it now :-)

Rahul Tripathi · Accepted Answer · 2013-09-11 16:52:01Z

2

May be you are looking for:-

overflow:hidden;

to hide the text outside the zone.

or may you can try using this:-

overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;

answered Sep 11, 2013 at 16:52

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

Collectives™ on Stack Overflow

CSS display: table-cell ignores overflow and width

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related