Bir TD içinde Konum Göreceli / Mutlak Kullanılıyor mu?

Takip koduna sahibim:

<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>

Bu hiç çalışmıyor. Bazı nedenlerden dolayı, konum: göreli komutu TD'de okunmuyor ve DIV bildirimi sayfamın altındaki içerik kabının dışına yerleştiriliyor. TD'nin tüm içeriğini aşağıdaki gibi bir DIV'ye koymaya çalıştım:

<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>

Ancak bu yeni bir sorun yaratır. Tablo hücresinin içeriğinin yüksekliği değişken olduğundan, DIV uyarısı her zaman hücrenin altında değildir. Bir tablo hücresi 60 piksel işaretleyicinin ötesine uzanırsa, ancak diğer hücrelerin hiçbiri yapmazsa, diğer hücrelerde DIV bildirimi alt yerine 60 piksel aşağıdadır.

Bunun nedeni, CSS 2.1'e göre position: relative, tablo öğeleri üzerindeki etkisinin tanımsız olmasıdır. Bunu açıklayan bir örnek position: relative, Chrome 13 üzerinde istenen etkiye sahip, ancak Firefox 4'te değil. Buradaki çözümünüz div, içeriğinizin çevresine bir eklemek ve position: relativebunun divyerine td. Aşağıda position: relative(1) ile bir diviyi), (2) bir td(iyi değil) ve son olarak (3) bir diviç a td(yine iyi) ile elde ettiğiniz sonuçları göstermektedir .

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

Bu numara da uygundur, ancak bu durumda hizalama özellikleri (orta, alt vb.) Çalışmayacaktır.

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

Tablo hücresinin içeriği, değişken yükseklik, 60 pikselden fazla olabilir;

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

İkinci denemenizle ilgili olarak, dikey hizalama kullanmayı denediniz mi? ya

<td valign="bottom">

veya css ile

vertical-align:bottom

"display: block;" yaparsanız da çalışır. td üzerinde, td kimliğini yok ediyor, ancak işe yarıyor!