如何防止jsTree扩展表格单元格？

Question

我在表格单元格中创建了一个jsTree。

没有展开的树看起来像这样：

但是当我点击任何根节点时。它扩展了表格单元格。

我希望不要扩展表格单元格。

我的代码如下：

<table border="1" cellpadding="0"cellspacing="0" width="100%" style="margin-top:10px;">
                <tr>
                    <td style="padding-left:5px;">PCA</td>
                    <td id="population"></td>
                    <td id="sex"></td>
                    <td id="literacy"></td>
                </tr>
            </table>

<script type="text/javascript">
            $(function () {
                $("#population").jstree({ 

                    "html_data" : {
                        "data" : "<?php echo $populationdata;?>"
                    },
                    "plugins" : [ "themes", "html_data","ui","checkbox" ]
                });
                $("#sex").jstree({ 

                    "html_data" : {
                        "data" : "<?php echo $sexdata;?>"
                    },
                    "plugins" : [ "themes", "html_data","ui","checkbox" ]
                });
                 $("#literacy").jstree({ 

                    "html_data" : {
                        "data" : "<?php echo $literacydata;?>"
                    },
                    "plugins" : [ "themes", "html_data","ui","checkbox" ]
                });

            });
        </script>

我想使用叠加方法，我做了以下更改

<table border="1" cellpadding="0"cellspacing="0" width="100%" style="margin-top:10px;">
                <tr>
                    <td style="padding-left:5px;">PCA</td>
                    <td><div id ="overlay"><div id="population"></div></div></td>
                    <td><div id ="overlay"><div id="sex"></div></div></td>
                    <td><div id ="overlay"><div id="literacy"></div></div></td>
                </tr>
            </table>

#overlay {
    position: fixed;
    z-index: 10000;
}           

但现在树看起来像这样：

如何解决此问题？

Answer 1

要防止表格单元格展开，您需要将style属性应用于包含div的{​​{1}}。

现在你的表看起来像这样

jstree

这会阻止表格单元格扩展，但如果空间不足则提供滚动条。