Question

I’m trying to render a treeview in ASP.NET as follows (JSFiddle here)

<table>
    <colgroup>
        <col width="20" span="2" />
        <col width="*" /> // removing this width doesn't change anything
        <col width="20" />
    </colgroup>
    <tr>
        <td colspan="3">Top-level element</td>
        <td>(checkbox)</td>
    </tr>
    <tr>
        <td>(spacer)</td>
        <td colspan="2">Mid-level element</td>
        <td>(checkbox)</td>
    </tr>
  <tr>
    <td>(spacer)</td>
    <td>(spacer)</td>
    <td colspan="1">Bottom</td>
    <td>(checkbox)</td>
  </tr>
</table>

where (spacer) is a 20px-wide cell that has treelines in it and (checkbox) is a checkbox, of which I’d like all to be aligned in the right-hand column.

In IE8 this renders as I expect – the *-width col, spanned with the spacer cells, expands enough to accomodate the longest item in the spanned cells.

| Top-level element     | [] |
| . | Mid-level element | [] |
| . | . |Bottom         | [] |

In IE7, it doesn’t render correctly. The *-width col only expands enough to accomodate the cells actually in the penultimate column, not those that span across into it, and the other cells break onto multiple lines.

| Top-level      | [] |
| element        |    |
| . | Mid-level  | [] |
|   | element    |    |
| . | . | Bottom | [] |

Is there a way I can make IE7 lay this table out properly, while still keeping the table width dynamic? (I.e. without just giving the penultimate column or the table itself a fixed width.)

Alternatively, is there a way I can obtain this dynamic sizing using divs instead of a table?

A couple of other points:

• Setting individual cell widths doesn’t work – IE7 seems to ignore them, and that leads to the tree-lines all being out of line.
• Setting table-layout: fixed fixes the alignment, but in IE7 (again, not in IE8) it makes the table 100% wide.

Answer 1

I could be wrong, but even in a colgroup I’m pretty sure a width of * is invalid. I’ve only heard of using the star-sizes with a preceeding number.

Have you tried a more “standard” way of doing this by defining a header row with fixed widths, and leaving the width off the central column? So long as the table’s width is 100% or at the very least dynamic past the point of the fixed width columns, it should span the remainder.

After discussion and playing around, JS seems to be the best solution:

<table id="test" cellpadding="0">
    <tr><td style="width: 20px"></td><td style="width: 20px"></td><td></td><td style="width: 20px"></td></tr>
    <tr>
        <td colspan="3">Top-level element</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr> 
        <td>+</td>
        <td colspan="2">Mid-level element</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td> </td>
        <td>+</td>
        <td>Bottom</td>
        <td><input type="checkbox" /></td>
    </tr>
</table>
<script type="text/javascript">
    alert("Setting to: " + document.getElementById('test').clientWidth);
    document.getElementById('test').style.width = document.getElementById('test').clientWidth + 'px';
    document.getElementById('test').style.tableLayout = 'fixed';
</script>