Question

我正在尝试在ASP.NET中呈现一个树视图，如下所示（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>

其中(spacer)是一个20px宽的单元格，其中包含treelines而(checkbox)是一个复选框，我希望所有这些单元格都在右侧列中对齐。

在IE8中，这正如我所期望的那样呈现 - * - 宽度col，跨越间隔单元格，扩展到足以容纳跨越单元格中最长的项目。

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

在IE7中，它无法正确呈现。 * -width col只能扩展到足以容纳实际倒数第二列的单元格，而不是那些跨越它的单元格，而其他单元格则分成多行。

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

有没有办法可以让IE7正确地放置这张桌子，同时仍保持桌子宽度动态？（即，不给倒数第二列或表本身固定宽度。）

或者，有没有办法可以使用div而不是表来获得这种动态大小调整？

其他几点：

设置单个单元格宽度不起作用 - IE7似乎忽略它们，这导致树线全部脱节。
设置table-layout: fixed修复了对齐方式，但在IE7中（再次，不是在IE8中），它使表格100％宽。

Answer 1

我可能错了，但即使在colgroup我也很确定*的宽度无效。我只听说过使用前面编号的星号。

您是否尝试过更“标准”的方法，通过定义具有固定宽度的标题行，并使宽度偏离中心列？只要表的宽度为100%或者在固定宽度列的点之后至少是动态的，它应该跨越剩余部分。

经过讨论和讨论，JS似乎是最好的解决方案：

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

变化的colspan宽度bug

1 个答案: