Как эффективно вывести элемент из потока документов?

Question

У меня есть таблица со многими тдс. Я хочу показать div за этим, чтобы создать видимость закругленных углов. Я назвал Div в течение th. Вот пример jsFiddle проблемы.

Я думал, что смогу сделать это, используя 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>