Table overflows parent div when td content is too wide

Question

I prepared a JSFiddle to explain/show you my problem: http://jsfiddle.net/nz96C/

It looks alright at first, but when I add some text to #firsttd the whole table overflows the parent div once the tds whole width is used. I know how to solve this problem with CSS (#firstdiv {width:90px;overflow:hidden;}) but I don't know the exact number of pixels (percentage doesn't work). Also I don't want the text in the first td to wrap.

I hope you get my problem, I even have trouble explaining it in my first language.

EDIT: My goal is to have a table in which it doesn't matter how long the text in the first td is, the table should never overflow the parent div - without the text being wrapped. I want the text which overflows the first td just not to be shown.

Answer 1

Same answer as another very recent topic:table-layout:fixed; + width. DEMO

table {
    table-layout:fixed;
    width:100%;
}
td {
    border: 1px solid black;
    overflow:hidden;/* optionnal*/
}
#firsttd {
    white-space: nowrap;
}