Використання відносної / абсолютної позиції в 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 пікселів, а не внизу.

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

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

Цей трюк також підходить, але в цьому випадку властивості вирівнювання (середина, низ тощо) не спрацюють.

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

Зміст комірки таблиці, змінна висота, може бути більше 60 пікселів;

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

Що стосується вашої другої спроби, ви намагалися використовувати вертикальне вирівнювання? Або

<td valign="bottom">

або з css

vertical-align:bottom

також працює, якщо ви робите "display: block;" на td, знищуючи ідентичність td, але працює!