Question

如何在调整大小时使内部表与父p重叠5 px？

我目前的解决方案：

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

问题是它在调整大小时会变小......

如何让它与5px不断重叠;

Answer 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>

Answer 2

您是否尝试过以下操作：

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

此表将在右侧和底部与div重叠5px。添加边距以使表格填充左侧和顶部。如果您希望整个表格偏移，请省略边距。您可能需要在表格上方的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>

Answer 3

简而言之：

将table粘贴到另一个div内并将table的宽度设置为100％
让div通过将其定位设置为绝对（确保父亲具有亲戚）并将其宽度设置为100％来进行移动。
在新div上使用负边距将其精确拉出5px。

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

HTML表格动态重叠父div

3 个答案: