Используя положение относительное / Абсолютное в пределах TD?

у меня есть следующий код:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

это не работает вообще. По какой-то причине команда position:relative не читается на TD, а уведомление DIV помещается вне контейнера содержимого в нижней части моей страницы. Я попытался поместить все содержимое TD в DIV, например:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

однако, это создает новую проблему. Поскольку высота содержимого ячейки таблицы является переменной, уведомление DIV не всегда находится внизу из камеры. Если ячейка таблицы выходит за пределы маркера 60px, но ни одна из других ячеек не делает этого, то в других ячейках DIV уведомления находится на 60px вниз, а не внизу.

5 99
html html-table cursor-position

5 ответов:

это потому, что по данным CSS 2.1 эффект position: relative на элементах таблицы не определено. Например, position: relative имеет желаемый эффект на Chrome 13, но не на Firefox 4. Ваше решение здесь, чтобы добавить div вокруг вашего контента и поставить position: relative на div вместо td. Ниже показаны результаты, которые вы получаете с помощью position: relative (1) на div хорошо), (2) На a td(не хорошо), и, наконец, (3) На a div внутри a td (снова).

On Firefox 4

Для справки - HTML source.

174

этот трюк также подходит, но в этом случае выровняйте свойства (середина, дно и т. д.) не будет работать.

<td style="display: block; position: relative;">
</td>
5

что касается вашей второй попытки, вы пытались использовать вертикальное выравнивание ? Либо

<td valign="bottom">

или с css

vertical-align:bottom
2

Содержимое ячейки таблицы, переменной высоты, может быть более 60px;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

2

также работает, если вы делаете "display: block;" на td, уничтожая идентификатор td, но работает!

-1