CSS display: table-cell ignores overflow and width

Question

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

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:

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

Answer 1

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