防止td中的跨度满足

Question

I use contenteditable in td

<table style="width:200px">
<tr>
    <td contenteditable  style="width:100px" id="1">test</td>
    <td contenteditable  style="width:100px" id="2">test</td>
</tr>
</table>

when I enter more text in the first td, it make the second td become smaller, then table will bigger than 200px that I specified before, how can I prevent that ?

Answer 1

Try this:

<table style="max-width:200px;">
<tr>
    <td contenteditable="true" style="max-width:100px; word-wrap: break-word;" id="1">test</td>
    <td contenteditable="true"  style="width:100px;" id="2">test</td>
</tr>
</table>

Answer 2

http://jsfiddle.net/8ZNj3/1/

html:

<table>
    <tr>
        <td contenteditable>this long text won't overflow</td>
        <td contenteditable>test</td>
    </tr>
</table>

css:

table {
    width: 200px;
    table-layout: fixed;
}
td {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
}