HTML 表格动态重叠父 div

发布于 2024-07-10 14:14:01 字数 249 浏览 6 评论 0原文

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

我当前的解决方案：

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

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

我怎样才能使其不断与 5px 重叠；

原文

How can i make the inner table to overlap the parent div with 5 px while resizing?

my current solution:

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

problem is that it gets smaller when resizing...

how can I make it constantly overlap with 5px;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏九 2024-07-17 14:14:01

以下内容似乎在 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>

The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.

You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.

Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.

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

回复收藏 0 原文

滥情空心 2024-07-17 14:14:01

简而言之：

将 table 粘贴到另一个 div 中，并将 table 的宽度设置为 100%
使该 div通过将其定位设置为绝对（确保父级具有相对位置）并将其宽度设置为 100% 来进行移动。
在新的 div 上使用负边距将其精确拉出 5 像素。

这有点混乱，但您肯定需要负边距，并且可能需要 position:absolute 使其重叠...

回复收藏 0 原文

空‖城人不在 2024-07-17 14:14:01

您是否尝试过以下操作：

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>

Have you tried the following:

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

This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.

Here's a full example:

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

回复收藏 0 原文

~没有更多了~