CODEWITHSUNDEEP
htmlcssresize
Mogensl Lykketoft
Mogensl Lykketoft

Reputation:

HTML table to overlap parent div dynamically

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;

Upvotes: 1

Views: 10226

Answers (3)

chriscena
chriscena

Reputation: 478

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>

Upvotes: 0

BlackMael
BlackMael

Reputation: 3218

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>

Upvotes: 1

Oli
Oli

Reputation: 239998

In short:

  1. Stick the table inside another div and set the table's width to 100%
  2. Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
  3. Use negative margins on the new div to pull it out by precisely 5px.

It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...

Upvotes: 0

Related Questions