防止td中的跨度满足

Question

我在td中使用contenteditable

<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>

当我在第一个td中输入更多文本时，它会使第二个td变小，然后表格将大于我之前指定的200px，我该如何防止？

Answer 1

试试这个：

<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;
}