Clever Geek Handbook

HTML table to dynamically overlap parent div

How do I make the inner table overlap the parent div with 5 px on resize?

my current solution:

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

the problem is that when resized it gets smaller ...

how can i get it to overlap constantly with 5px;

+1


source to share


3 answers


The app seems to work well in FF3, Chrome and IE7. Although using expressions in IE CSS is not ideal.

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



Also note that in this example I had to subtract 2px from the height of the "inner" div to adjust 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>
+1


source


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 on the right side and bottom. Added margins to make the table fill the left side and top. Just omit the fields if you want the entire table to be offset. You will probably have to add some style to the div or content above the table to keep the div from collapsing.



Here's a complete 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


source


In short:

  • Insert table

    inside another div

    and set the width table

    to 100%
  • Make a div

    move by setting its positioning to absolute (make sure the parent is relative) and set its width to 100%.
  • Use negative margins on the new div

    one to pull it out exactly 5px.

It's a little messy, but you definitely want negative margins, and you probably need position:absolute

it to overlap ...

0


source






More articles:


All Articles