自动增长表格单元格和其中的contenteditable div

Question

是否有可能使自动增长表格单元格与其大小有关 - 这是否属于可信的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;
}

和the fiddle。