javascript - 当列中有树时，表格会调整大小

Question

下面我发布了一些代码，我正在使用这些代码尝试将表格宽度设置为每列的固定比例。一个 10%，另一个 90%。

目前，我正在通过 javascript 在“treeOne”div 标记处插入一个 dijit.Tree 小部件。当这棵树打开时，我的柱子会变宽以容纳空间。我希望无论如何它总是 10% 宽，并停止调整列的大小。我究竟做错了什么？

<table width="100%" border="1">
        <thead>
            <tr>
            <td  style="overflow:hidden;width:10%;"> Tree</td>
              <td style="width:90%;" > Query</td>                       
         </tr>
        </thead>
       <tbody>
        <td style="overflow:hidden;width:10%;">
                    <div id ="treeOne">Insert Tree here</div>
        </td>
        <td style="width:90%;">
    .
    .
    .

Answer 1

表格单元格应该像这样工作，扩展以容纳其中的任何内容。

如果您希望它的大小固定(并在此过程中砍掉内容)，请尝试使用带有 div 的 CSS:

<style type="text/css">
.col1 {
    clear:both;
    float:left;
    overflow:hidden;
    width:10%;
}
.col2 {
    float:left;
    width:90%;
}
</style>

<div class="col1">
    <div id ="treeOne">Insert Tree here</div>
</div>
<div class="col2">...</div>