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

Question

У меня есть стол, со многими тс. Я хочу отобразить div позади этого, чтобы придать ему вид закругленных углов. Я назвал Div в пределах th. 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>