动态重叠父 div 的 HTML 表格

标签 html css resize

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

我目前的解决方案:

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

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

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

最佳答案

以下内容似乎在 FF3、Chrome 和 IE7 中运行良好。虽然在 IE 的 CSS 样式中使用表达式并不理想。

您应该看到渲染时,蓝色的“外部”div 显示在“内部”div 中。对于 IE 以外的浏览器,“内部”div 将显示为红色,在其他浏览器中显示为绿色。

另请注意,在此示例中,我必须从“内部”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>

关于动态重叠父 div 的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/343422/

相关文章:

html - 如何添加最小 margin ?

html - CSS3 和 HTML5 div 无需 JavaScript 即可移动

html - 如何热点可调整大小的图像?

c# - 复选框文本 l 不适合其文本

jquery - 在调整大小事件与 hmtl5 视频全屏模式下重新加载页面

javascript - 下拉 onchange 选定列表不起作用?

php - Yii - 方法在此 View 中包含另一个 View

javascript - 悬停 div 另一个 div 出现在顶部

css - 伪元素 hover Safari 问题

css - 如何从 Compass 生成的 Sprite 图像文件名中删除散列?