html - 自動拡張テーブル セルとその中の contenteditable div

Question

子のサイズに関連する自動拡張テーブルセルを作成することは可能ですか? contenteditable div?

CSS:

table {
    border:1px solid;
    border-collapse:collapse;
    width:350px;
}
td {
    border: 1px solid;
    position:relative;
    padding:0px;
    height:100px;
}
div {
    width:100%;
    height:100%;
    margin: 0;
    padding:0;  
    position:relative;  
    border: 1px solid red;
}

html:

<table>
    <tr>
        <td><div contenteditable>one</div></td>
        <td><div contenteditable>two</div></td>
    </tr>
    <tr>
        <td><div contenteditable>three</div></td>
        <td><div contenteditable>four</div></td>
    </tr>
</table>

私の例では、表のセルはそれ自体のサイズを変更せず、div コンテンツが重なっています。

http://jsfiddle.net/wxduS/

Answer 1

変更された CSS:

table {
    border:1px solid;
    border-collapse:collapse;
    width:350px;
    table-layout:fixed;
}

td {
    position:relative;
    padding:0px;
    border: 1px solid red;
    vertical-align: top;
}

div {
    width:100%;
    height:100%;
    min-height:100px;
    margin: 0;
    padding:0;    
    word-wrap:break-word;
}

とフィドル。