html - 自动增长表格单元格和里面的内容可编辑的 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;
}

和小提琴。