Question

Below I am posting some code that I am using to try to set a table width to be fixed proportions for each column. 10% for one, 90% for the other.

Presently, I am inserting a dijit.Tree widget via javascript at the “treeOne” div tag. When this tree opens up, my column grows in width to accomodate. I would like for it to always be 10% wide no matter what, and stop resizing the column. What am I doing wrong?

<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

Table cells are supposed to work like this, expanding to accommodate whatever’s inside of them.

If you want it to be fixed in size (and chop off the contents in the process), try using CSS with divs instead:

<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>