0

次のように 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>

where(spacer)はツリーラインを含む 20px 幅のセルで(checkbox)、チェックボックスです。右側の列にすべてを揃えたいと思います。

IE8 では、これは期待どおりにレンダリングされます。*-widthcolは、スペーサー セルにまたがり、スパンされたセル内の最長のアイテムを収容するのに十分なほど拡張されます。

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

IE7 では、正しくレンダリングされません。*-widthcolは、実際には最後から 2 番目の列にあるセルを収容するのに十分なだけ拡張され、他のセルは複数の行に分割されます。

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

テーブル幅を動的に保ちながら、IE7 でこのテーブルを適切にレイアウトする方法はありますか? (つまり、最後から 2 番目の列またはテーブル自体に固定幅を与えるだけではありません。)

または、テーブルの代わりに 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 に答える