0

我正在尝试按如下方式在 ASP.NET 中呈现树视图（此处为 JSFiddle ）

<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)是一个 20px 宽的单元格，其中包含树线，并且(checkbox)是一个复选框，我希望所有的单元格都在右侧列中对齐。

在 IE8 中，这按我的预期呈现 - 与间隔单元格跨越的*-widthcol扩展得足以容纳跨越单元格中最长的项目。

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

在 IE7 中，它不能正确呈现。*-widthcol仅扩展到足以容纳实际在倒数第二列中的单元格，而不是跨越其中的单元格，并且其他单元格分成多行。

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

有没有办法让 IE7 正确地布置这张桌子，同时仍然保持表格宽度动态？（即不只是给倒数第二列或表格本身一个固定的宽度。）

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

其他几点：

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

1 回答 1

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>
于 2012-09-27T08:26:34.863 回答