Использование позиции Относительная/Абсолютная в 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>

Это не работает вообще. По какой-то причине позиция: относительная команда не считывается на 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 не всегда находится в нижней части ячейки. Если ячейка таблицы растягивается за маркером 60 пикселей, но ни одна из других ячеек не делает, то в других ячейках уведомление DIV находится на 60 пикселей вниз, а не внизу.

Ответы

Ответ 1

Это связано с тем, что в соответствии с CSS 2.1 эффект position: relative на элементах таблицы undefined. Иллюстративно, что 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-источник.

Ответ 2

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

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

Ответ 3

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

<td valign="bottom">

или с помощью css

vertical-align:bottom

Ответ 4

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

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

Ответ 5

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