代码之家 › 专栏 › 技术社区 › Rawling

可变列跨度错误

html-table width internet-explorer-7 html

Rawling · 技术社区 · 12 年前

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

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

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

在IE7中,它无法正确渲染。*-宽度 科尔 只扩展到足以容纳倒数第二列中的细胞,而不是那些横跨其中的细胞,其他细胞分裂成多行。

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

有没有一种方法可以让IE7正确地布置这个表,同时保持表的宽度动态?(即,不给倒数第二列或表格本身一个固定的宽度。)

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

其他几点:

设置单独的单元格宽度不起作用——IE7似乎忽略了它们,这导致树行都不一致。
背景 table-layout: fixed 修正了对齐,但在IE7中(同样,不是在IE8中),它使表的宽度达到100%。

1 回复 | 直到 12 年前

Rudi Visser 12 年前

我可能错了,但即使在 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>