Sử dụng Vị trí Tương đối / Tuyệt đối trong TD?

Tôi có mã sau:

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

Điều này không hoạt động ở tất cả. Vì một số lý do, lệnh position: relative không được đọc trên TD và thông báo DIV đang được đặt bên ngoài vùng chứa nội dung ở cuối trang của tôi. Tôi đã cố gắng đưa tất cả nội dung của TD vào DIV như:

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

Tuy nhiên, điều này tạo ra một vấn đề mới. Vì chiều cao của nội dung của ô trong bảng có thể thay đổi, thông báo DIV không phải lúc nào cũng ở cuối ô. Nếu một ô trong bảng vượt ra ngoài điểm đánh dấu 60px, nhưng không có ô nào khác làm như vậy, thì trong các ô khác, thông báo DIV ở dưới 60px, thay vì ở dưới cùng.

Điều này là do theo CSS 2.1 , ảnh hưởng của position: relativecác phần tử bảng là không xác định. Minh họa cho điều này, position: relativecó hiệu quả mong muốn trên Chrome 13, nhưng không phải trên Firefox 4. Giải pháp của bạn ở đây là thêm một divnội dung xung quanh và đặt nội dung position: relativeđó divthay vì td. Phần sau minh họa kết quả bạn nhận được với position: relative(1) ở mặt divtốt), (2) về mặt trái td(không tốt) và cuối cùng là (3) về mặt divtrong td(lại tốt).

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

Thủ thuật này cũng phù hợp, nhưng trong trường hợp này các thuộc tính căn chỉnh (giữa, dưới cùng, v.v.) sẽ không hoạt động.

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

Nội dung của ô bảng, chiều cao có thể thay đổi, có thể lớn hơn 60px;

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

Về lần thử thứ hai, bạn đã thử sử dụng căn chỉnh dọc chưa? Hoặc

<td valign="bottom">

hoặc với css

vertical-align:bottom

cũng hoạt động nếu bạn thực hiện một "display: block;" trên td, phá hủy danh tính td, nhưng hoạt động!