การใช้ Position Relative / Absolute ภายใน 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 จึงไม่ได้อยู่ที่ด้านล่างของเซลล์เสมอไป ถ้าเซลล์ตารางยาวเกินเครื่องหมาย 60px แต่ไม่มีเซลล์อื่นทำดังนั้นในเซลล์อื่น DIV การแจ้งเตือนจะอยู่ที่ 60px ด้านล่างแทนที่จะอยู่ที่ด้านล่าง

เนื่องจากตามCSS 2.1position: 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>

เนื้อหาของเซลล์ตารางความสูงตัวแปรอาจมากกว่า 60px;

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

ในความพยายามครั้งที่สองของคุณคุณลองใช้แนวตั้งหรือไม่? ทั้ง

<td valign="bottom">

หรือด้วย css

vertical-align:bottom

ยังใช้งานได้ถ้าคุณทำ "display: block;" บน td ทำลายเอกลักษณ์ td แต่ได้ผล!