如何有效地从文档流中提取元素?

我认为你需要一种不同的方法。对于 <div> 与 <table> ,您需要 <DIV & GT; 要包装桌子:

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

这也会使 <DIV & GT; 出现在_后面 <表& gt; 不用操心 z-index .

从JSfiddle示例中,我认为您只需要一个表列后面的背景?要实现这一目标,您需要:

• 修复中所有列的宽度 <表& gt;
• 设置 <DIV & GT; 到要用作背景的列的宽度(或稍宽一点)
• 设置 <DIV & GT; 到中其他列的宽度 <表& gt;
• 设置 <表& gt; 减去表中其他列的宽度。

也许是这样?

<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;
}
​

我想你应该这样做:

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