Positon a div over table

Question

У меня есть таблица, которая может содержать div. Высота строки таблицы - 100 пикселей, а div - до 200 пикселей. Если div выше строки таблицы, мне нужно, чтобы он наложил таблицу, а также на нижнюю строку. Мне удалось сделать это с абсолютным положением следующим образом:

<div style="overflow: auto;"> 
<table> 
    <tr height="100"> 
    <td> 
     <div style="position: absolute; height: 200px"> 
    </td> 
    </tr> 
    <tr> 
    <td height="100"> 
     ... 
    </td> 
    </tr> 
    ... (many more rows) 
</table> 
</div> 

Таким образом, все хорошо. Проблема в том, что когда таблица становится очень длинной, и она делает прокрутку (из-за переполнения главных divs: auto), и я начинаю прокручивать divs, оставаясь в их положении, и перемещается только таблица. Также нижние divs показаны через фон. Я попытался изменить положение divs относительно относительного, но в этом случае divs больше не накладывают на таблицу, а нажимают строку таблицы до 200 пикселей.

Как это можно решить? Спасибо! :)

Answer 1

... или обрабатывайте механику непосредственно на своих элементах div, имея 2 из них, вместо того, чтобы пытаться заставить элементы таблицы хорошо играть с вашим структурированием HTML. Таблицы отлично подходят для одной цели, управляя табличными данными. Они не очень хороши для маркировки ваших данных. Ниже вам будет проще поддерживать и обновлять!

<table id="table"> 
     <tr> 
     <td> 
      <div style="position:relative; height:200px;"> 
      <div style="position: absolute; top:0; left:0; height: 200px"></div> 
      </div> 
     </td> 
     </tr> 
    </table> 

Затем обновить еще дальше, сохраняя все свои стили внутри таблицы стилей и просто позвонив классы ...

<table id="table"> 
     <tr> 
     <td> 
      <div class="sub-wrapper"> 
      <div class="sub-content"> 
       </div> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <div class="sub-wrapper"> 
      <div class="sub-content"> 
       </div> 
      </div> 
     </td> 
     </tr> 
    ...etc... 
    </table> 

Answer 2

вам нужно сделать ячейки таблицы position:relative и может понадобиться добавить верхнюю и левую позицию DIV

Редактировать

только обнаруженные Лобов имеют проблемы с относительным позиционированием, так что вы лучше сделать относительный DIV, а затем положить свой абсолютный DIV в этом:

<table> 
    <tr height="100"> 
    <td> 
     <div style="position:relative"> 
     <div style="position: absolute; top:0; left:0; height: 200px"></div> 
     </div> 
    </td> 
    </tr> 
</table> 

Пример: http://jsfiddle.net/EgBAy/