предотвратить пролет в тд contenteditable

Question

я использую 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> 

, когда я вхожу больше текста в первый тд, это сделать второй тд становится меньше, то таблица будет больше, чем 200px, что я указал ранее, как могу ли я предотвратить это?

Answer 1

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

Answer 2

Попробуйте это:

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