流体html树布局帮助（div而不是表格）

Question

我在html中需要有关动态布局的帮助。我需要它作为div工作，但只能用表格来设置它。

基本上它是一个树形结构，并且随着子节点的添加，创建了子表，这些子表创建了我想要的节点的布局。

也有人聪明地想要在不使用画布的情况下将父线路连接到子节点吗？

基本上它是一个思维导图

这是html 您可以在此处使用html查看布局http://jsfiddle.net/Z6jcD/

<table border="0">
        <tbody>
            <tr>
                <td>
                    <div class="divnodes" contenteditable="true" id="0">
                        <h4 class="marketing-header">Root</h4>
                    </div>
                </td>

                <td>
                    <table border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="divnodes" contenteditable=
                                    "true" id="1">
                                        <p style="font-weight: bold">Grand
                                        mother_</p>
                                    </div>
                                </td>

                                <td></td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="divnodes" contenteditable=
                                    "true" id="2">
                                        Grand father_
                                    </div>
                                </td>

                                <td>
                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="divnodes"
                                                    contenteditable="true" id=
                                                    "3">
                                                        <p style=
                                                        "font-weight: bold">
                                                        Mother_</p>
                                                    </div>
                                                </td>

                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="divnodes"
                                                    contenteditable="true" id=
                                                    "4">
                                                        Father_
                                                    </div>
                                                </td>

                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>