1

サイズ変更中に内部テーブルを親 div に 5 px オーバーラップさせるにはどうすればよいですか?

私の現在の解決策：

<div id="crop">
  <table style="width:105%; height:105%;">
    //table cells
  </table>
</div>

問題は、サイズを変更すると小さくなることです...

常に 5px と重なるようにするにはどうすればよいですか。

4

3 に答える 3

1

以下は、FF3、Chrome、および IE7 でうまく機能するようです。ただし、IE の CSS スタイルで式を使用することは理想的ではありません。

レンダリングすると、青い「外側」の div が「内側」の div 内に表示されることがわかります。「内側」の div は、IE 以外のブラウザーでは赤になり、代わりに緑になります。

また、この例では、「内側」の div の高さから 2px を差し引いて、上下の境界線を調整する必要があることに注意してください。

<html>
    <head>
        <style type="text/css">
            #outer {
                position: relative;
                border: solid 1px blue;
                height: 100px;
            }
            #inner {
                position: absolute;
                border: solid 1px red;
                top: -5px;
                left: -5px;
                bottom: -5px;
                right: -5px;
            }
        </style>
        <!--[if IE]>
        <style type="text/css">
            #inner {
                border: solid 1px green;
                height: 108px;
                width: expression(document.getElementById("outer").clientWidth + 10);
            }
        </style>
        <![endif]-->
    </head>
    <body>
        <table width="100%">
            <colgroup>
                <col />
                <col width="100" />
                <col width="200" />
            </colgroup>
            <tr>
                <td>
                    <div id="outer">
                        <div id="inner">
                            <table border="1">
                                <tr><td>A</td><td>B</td></tr>
                                <tr><td>C</td><td>D</td></tr>
                            </table>
                        </div>
                    </div>
                </td>
                <td>Alpha</td>
                <td>Beta</td>
            </tr>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
        </table>
    </body>
</html>
于 2008-12-05T15:22:52.370 に答える
0

要するに：

  1. table内側をもう一div枚くっつけてtableの幅を100%にします
  2. 位置を絶対に設定し (親が相対であることを確認してくださいdiv)、幅を 100% に設定して移動させます。
  3. 新しいものに負のマージンを使用divして、正確に 5px 引き出します。

少し面倒ですが、間違いなく負のマージンが必要であり、おそらくposition:absoluteオーバーラップさせる必要があります...

于 2008-12-05T11:02:46.657 に答える
0

次のことを試しましたか。

table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}

このテーブルは、右側と下部で 5px の div と重なります。テーブルの左側と上部を埋めるために余白が追加されます。表全体をオフセットしたい場合は、余白を省略してください。div が崩壊しないように、テーブルの上の div またはコンテンツに何らかのスタイルを追加する必要があるでしょう。

完全な例を次に示します。

<style type="text/css">
#container {
background-color: red; //color added for illustration
}

#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>

<!-- ... -->

<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>
于 2008-12-05T11:01:44.303 に答える