HTML таблица для динамического перекрытия родительского div - PullRequest
Новая
       6

HTML таблица для динамического перекрытия родительского div

1 голос
/ 05 декабря 2008

Как сделать так, чтобы внутренняя таблица перекрывала родительский div с 5 px при изменении размера?

мое текущее решение: 

<div id="crop">
  <table style="width:105%; height:105%;">
    //table cells
  </table>
</div>

Проблема в том, что он уменьшается при изменении размера ...

как сделать так, чтобы оно постоянно перекрывалось с 5px;

Ответы [ 3 ]

1 голос
/ 05 декабря 2008

Фоллинг, кажется, хорошо работает в FF3, Chrome и IE7. Хотя использование выражений в стилях CSS для IE не идеально.

Вы должны увидеть, что при визуализации синий «внешний» div отображается внутри «внутреннего» div. «Внутренний» div будет красным для браузеров, отличных от IE, где вместо него будет зеленый.

Также обратите внимание, что в этом примере мне пришлось вычесть 2px из высоты "внутреннего" div, чтобы скорректировать верхнюю и нижнюю границы. 

<html>
    <head>
        <style type="text/css">
            #outer {
                position: relative;
                border: solid 1px blue;
                height: 100px;
            }
            #inner {
                position: absolute;
                border: solid 1px red;
                top: -5px;
                left: -5px;
                bottom: -5px;
                right: -5px;
            }
        </style>
        <!--[if IE]>
        <style type="text/css">
            #inner {
                border: solid 1px green;
                height: 108px;
                width: expression(document.getElementById("outer").clientWidth + 10);
            }
        </style>
        <![endif]-->
    </head>
    <body>
        <table width="100%">
            <colgroup>
                <col />
                <col width="100" />
                <col width="200" />
            </colgroup>
            <tr>
                <td>
                    <div id="outer">
                        <div id="inner">
                            <table border="1">
                                <tr><td>A</td><td>B</td></tr>
                                <tr><td>C</td><td>D</td></tr>
                            </table>
                        </div>
                    </div>
                </td>
                <td>Alpha</td>
                <td>Beta</td>
            </tr>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
        </table>
    </body>
</html>
0 голосов
/ 05 декабря 2008

Короче говоря:

  1. Вставьте table внутри другого div и установите ширину table на 100%
  2. Сделайте так, чтобы div выполнял перемещение, установив его положение на абсолютное (убедитесь, что родитель имеет относительное значение) и установив его ширину на 100%.
  3. Используйте отрицательные поля для нового div, чтобы вытянуть его точно на 5px.

Это немного грязно, но вам определенно понадобятся отрицательные поля, и вам, вероятно, понадобится position:absolute для перекрытия ...

0 голосов
/ 05 декабря 2008

Вы пробовали следующее: 

table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}

Эта таблица будет перекрывать div с 5px справа и снизу. Поля добавляются, чтобы таблица заполнялась слева и сверху. Просто опустите поля, если вы хотите, чтобы вся таблица была смещена. Вам, вероятно, придется добавить какой-то стиль в div или содержимое над таблицей, чтобы предотвратить падение div.

Вот полный пример: 

<style type="text/css">
#container {
background-color: red; //color added for illustration
}

#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>

<!-- ... -->

<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>
...