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 中。对于 IE 以外的浏览器，“内部” 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

您是否尝试过以下方法：

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 回答
0

简而言之：

  1. table把里面的另一个粘起来，div把table's 的宽度设置为 100%
  2. 通过将div其定位设置为绝对（确保父对象具有相对位置）并将其宽度设置为 100% 来实现移动。
  3. 使用新div的负边距将其精确拉出 5px。

这有点乱，但你肯定需要负边距，你可能需要position:absolute让它重叠......

于 2008-12-05T11:02:46.657 回答