Question

我有一张桌子，有很多tds。我想在这背后显示一个div，以使其具有圆角的外观。我已经把Div打了个电话。 Here is a jsFiddle example问题。

我以为我可以使用position: realtive;和z-index: -100;来做到这一点但它似乎不是我想要的。

感谢任何人的帮助。

Answer 1

我认为你需要一种不同的方法。要使<div>与<table>的高度相同，您需要<div>来包装表：

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

这也会使<div>显示在<table>后面，而不会摆弄z-index。

从你的jsFiddle示例中，我认为你只想要一个表列背后的背景？为此，您需要：

修正<table>
将<div>的宽度设置为您希望它为背景的列的宽度（或更宽一点）
将<div>的左边距设置为<table>
将<table>的左边距设置为减去表格中其他列的宽度。

也许是这样的？

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

Answer 2

你应该这样做我猜：

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

如何有效地从文档流中取出元素？

2 个答案: