Menggunakan Posisi Relatif / Absolut dalam TD?

108

Saya memiliki kode berikut:

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

Ini tidak bekerja sama sekali. Untuk beberapa alasan, perintah position: relative tidak dibaca di TD dan pemberitahuan DIV ditempatkan di luar wadah konten di bagian bawah halaman saya. Saya sudah mencoba memasukkan semua isi TD ke dalam DIV seperti:

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

Namun, ini menimbulkan masalah baru. Karena tinggi konten sel tabel adalah variabel, DIV pemberitahuan tidak selalu berada di bagian bawah sel. Jika sel tabel membentang melebihi penanda 60px, tetapi tidak ada sel lain yang melakukannya, maka di sel lain, DIV pemberitahuan berada di 60px ke bawah, bukan di bagian bawah.

html position html-table Jason Axelrod
sumber
Apakah ada alasan untuk menggunakan tabel tersebut? Saya berasumsi bahwa isi tabel lainnya akan menggeser isi sel ini. Jika tabel diperlukan, Anda dapat menggunakan dua baris atas dengan valign = atas dan bawah dengan valign = bawah
Wayne
Jika Anda menggunakan tabel untuk tujuan tata letak, saya akan menyarankan agar Anda tidak melakukannya. Menggunakan tabel untuk menampilkan data tidak masalah, tapi bukan yang terbaik untuk tata letak.
Kyle
5
Ini untuk kalender ... jadi kisi tabel sangat penting: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Jawaban:

189

Ini karena menurut CSS 2.1 , efek position: relativeelemen tabel tidak terdefinisi. Ilustrasi ini, position: relativememiliki efek yang diinginkan pada Chrome 13, tetapi tidak pada Firefox 4. Solusi Anda di sini adalah menambahkan divsekitar konten Anda dan meletakkannya position: relativedi divatasnya alih - alih td. Berikut ini ilustrasi hasil yang Anda peroleh dengan position: relative(1) atas divbarang), (2) atas td(tidak baik), dan terakhir (3) di bagian divdalam a td(barang lagi).

Di Firefox 4

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

avernet
sumber
29
Tinggi div tidak akan 100%, jadi pemosisian relatif ke bawah: 0 tidak berpengaruh.
Softlion
1
Perhatikan bahwa "Rentang absolut" dalam contoh ini tidak akan memengaruhi tinggi td yang pada dasarnya membuat penggunaan tabel tidak berguna.
Dror
@Softlion: Bagaimana dengan membungkus seluruh konten di tddalam a div, set ke width: 100%dan height: 100%, terapkan padding apa pun dari td ke div, dan setel ke relative? Idenya adalah untuk membuat lapisan penahan tipis tepat di atas td, yang bertindak seperti tditu sendiri, tetapi itu a div. Itu berhasil untuk saya.
CamilB
1
Tautan untuk sumber HTML sudah mati. Bisakah Anda memperbarui / menyegarkannya?
Peter VARGA
1
Bagi mereka yang menemukan jawaban ini pada 2019 atau lebih baru: meskipun CSS2.1 benar-benar mengatakan bahwa efek dari position:relativebagian tabel internal tidak ditentukan, itu berarti perilaku bagian tabel itu sendiri (misalnya, tidak jelas bagaimana seharusnya batas tdperilaku jika dialihkan position:relativejika border-collapse:collapse). Itu tidak mengecualikan mereka dari kemungkinan mengandung blok keturunan yang benar-benar diposisikan. Jadi perilaku Firefox ternyata hanya sebuah bug, yang telah diperbaiki pada tahun 2014.
Ilya Streltsyn
5

Trik ini juga cocok, tetapi dalam kasus ini properti pelurusan (tengah, bawah, dll.) Tidak akan berfungsi.

<td style="display: block; position: relative;">
</td>
Sergey Onishchenko
sumber
2

Isi sel tabel, tinggi variabel, bisa lebih dari 60px;

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

Xavier Deva Arul
sumber
1

Sehubungan dengan upaya kedua Anda, apakah Anda mencoba menggunakan perataan vertikal? Antara

<td valign="bottom">

atau dengan css

vertical-align:bottom
Kyle
sumber
Itu tidak akan berhasil ... jika saya melakukan itu, maka isi sel tabel akan diberi jarak 60px dari bawah; bukan di atas.
Jason Axelrod
-2

juga berfungsi jika Anda melakukan "display: block;" di td, menghancurkan identitas td, tapi berhasil!

daigorocub.dll
sumber