Apakah Firefox mendukung posisi: relatif pada elemen tabel?

Ketika saya mencoba menggunakan position: relative/ position: absolutepada <th>atau <td>di Firefox sepertinya tidak berfungsi.

Cara mudah dan paling tepat adalah dengan membungkus isi sel dalam div dan menambahkan posisi: relatif terhadap div itu.

contoh:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

Seharusnya tidak ada masalah. Ingat juga untuk mengatur:

display: block;

Karena setiap browser web termasuk Internet Explorer 7, 8 dan 9 menangani posisi dengan benar: relatif pada elemen tampilan tabel dan hanya FireFox yang menangani hal ini secara tidak tepat, cara terbaik Anda adalah menggunakan shim JavaScript. Anda tidak perlu mengatur ulang DOM Anda hanya untuk satu browser yang salah. Orang-orang menggunakan shims JavaScript sepanjang waktu ketika IE mendapatkan sesuatu yang salah dan semua browser lainnya memperbaikinya.

Ini adalah jsfiddle sepenuhnya beranotasi dengan semua HTML, CSS, dan JavaScript yang dijelaskan.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Contoh jsfiddle saya di atas menggunakan teknik "Desain Web Responsif" hanya untuk menunjukkan bahwa itu akan bekerja dengan tata letak responsif. Namun, kode Anda tidak harus responsif.

Ini adalah JavaScript di bawah ini, tetapi itu tidak masuk akal di luar konteks. Silakan periksa tautan jsfiddle di atas.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

Dimulai dengan Firefox 30, Anda dapat menggunakan positionkomponen tabel. Anda dapat mencoba sendiri dengan bangunan malam saat ini (berfungsi sebagai mandiri): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Test case ( http://jsfiddle.net/acbabis/hpWZk/ ):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

Anda dapat terus mengikuti diskusi pengembang tentang perubahan di sini (topiknya adalah 13 tahun ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Dilihat oleh sejarah rilis baru-baru ini, ini bisa tersedia secepat Mei 2014. Saya hampir tidak bisa menahan kegembiraan saya!

EDIT (6/10/14): Firefox 30 dirilis hari ini. Segera, penentuan posisi tabel tidak akan menjadi masalah di browser desktop utama

Pada Firefox 3.6.13, posisi: relatif / absolut tampaknya tidak berfungsi pada elemen tabel. Ini tampaknya sudah lama menjadi perilaku Firefox. Lihat yang berikut: http://csscreator.com/node/31771

Tautan CSS Creator memposting referensi W3C berikut:

Efek 'posisi: relatif' pada tabel-baris-grup, tabel-header-grup, tabel-footer-grup, tabel-baris, tabel-kolom-grup, tabel-kolom, sel-tabel, dan elemen keterangan-tabel tidak terdefinisi. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Coba gunakan display:inline-blockitu bekerja untuk saya di Firefox 11 memberi saya kemampuan posisi dalam td / th tanpa merusak tata letak tabel. Sehubungan dengan itu position:relativepada td / th seharusnya membuat hal-hal bekerja. Baru saja membuatnya bekerja sendiri.

Saya memiliki table-cellelemen (yang sebenarnya DIVbukan TD)

Saya diganti

display: table-cell;
position: relative;
left: .5em

(yang bekerja di Chrome) dengan

display: table-cell;
padding-left: .5em

Tentu saja bantalan biasanya ditambahkan ke lebar dalam model kotak - tetapi tabel tampaknya selalu memiliki pikiran mereka sendiri ketika datang ke lebar absolut - jadi ini akan bekerja untuk beberapa kasus.

Menambahkan tampilan: blok ke elemen induk membuat ini berfungsi di firefox. Saya juga harus menambahkan atas: 0px; kiri: 0px; ke elemen induk agar Chrome berfungsi. IE7, IE8, & IE9 juga berfungsi.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

Jenis solusi yang diterima berfungsi, tetapi tidak jika Anda menambahkan kolom lain dengan lebih banyak konten di dalamnya daripada yang lain. Jika Anda menambah trheight:100% Anda , td & div maka itu akan berfungsi.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

Satu-satunya masalah adalah ini hanya memperbaiki masalah ketinggian kolom di FF, bukan di Chrome dan IE. Jadi ini selangkah lebih dekat, tetapi tidak sempurna.

Saya memperbarui biola dari Jan yang tidak bekerja dengan jawaban yang diterima untuk menunjukkan itu berfungsi. http://jsfiddle.net/gvcLoz20/