Q_24460926: how to overlap parent table with one pixel on both sides

This example shows how to overlap the parent table with an inner table by one pixel in each direction. This is visible here because the parent table has a border and the innner table has not. See the code section (or View Source).

This page will remain online for future reference. The original question can be viewed at Experts-Exchange, but requires (free) membership. More information about me, about how this site is maintained and about how to use these pages for yourself, check out the opening page.

Use the following code:

A note on the code: the float:left (or right) is used to have this work on IE7. The position:relative is necessary to have the margin work across the boundary of the cell (without float and position it works in compliant browsers). The negative margin is the real core of the solution and must have the same size as the cellspacing or the border width of the outer table.

<table cellpadding="0" cellspacing="2" width="100%" 
    style="background-color: #00DD00;">
    <tr>
        <td>
            <-- the inner table -->
            <div style="width:inherit;height:inherit;
                          margin:-2px;float:left;
                          position:relative;">
                                
                <-- the inner table -->
                <table id="myTable" cellpadding="5" cellspacing="2" width="100%">
                    <-- etc -->
                </table>
            </div>
        </td>
    </tr>
</table>
	

table with <div> and styles (solution)

The code for this table is above (at least the significant bits). The important part is the <div> which is easy to expand across borders and behaves differently then the all-too-flexible table.

same table without <div> and styles (original)

This is the table as it originally was (simplified example). The problem was that the existing CSS could not be disturbed and that JavaScript should not be used. The solution is above.