How to effectively take an element out of the document flow?

Question

I have a table, with many tds. I want to display a div behind this to give the appearance of it having rounded corners. I have called the Div within a th. Here is a jsFiddle example of the problem.

I thought I could do it using position: realtive; and z-index: -100; yet it doesn't seem to be what I want.

Thanks to anyone for any help.

Answer 1

You should do this I guess :

<div class="compare-rounder">
    <table>
    ...
    </table>
</div>

Answer 2

I think you’ll need a different approach. For the <div> to be the same height as the <table>, you’ll need the <div> to wrap the table:

<div>
    <table>
    ....
    </table>
</div>

That’ll also make the <div> appear “behind” the <table> without fiddling with z-index.

From your jsFiddle example, I think you only want the background behind one table column? To achieve this, you’ll need to:

• fix the width of all the columns in your <table>
• set the width of the <div> to the width of the column you want it to be the background for (or a little wider)
• set the left margin of the <div> to the width of the other columns in the <table>
• set the left margin of the <table> to minus the width of the other columns in the table.

Maybe something like this?

<div class="compare-rounder">
    <table>
        <thead>
            <th class="price">Price</th>
            <th class="product">Product</th>
        </thead>
        <tbody>
            <tr>
                <td>$4000</td>
                <td>for this</td>
            </tr>
        </tbody>
    </table>
</div>

table,
table td,
table th
{
    border: 1px #000 solid;
}

table
{
    margin-left: -500px;
}

.product
{
    width: 500px;
}

.price
{
    width: 50px;
}

.compare-rounder
{
    width: 60px;
    background-color: #f0f; /*bright pink*/
    border: 1px #ccc solid !important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-left: 500px;
}
​