Apakah Firefox mendukung posisi: relatif pada elemen tabel?


169

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


3
Tidak, saya pikir tidak ada browser yang mendukungnya dengan benar. Itu tidak sah dalam standar HTML apa pun AFAIK
Pekka

2
@ Pekka: HTML tidak muncul, ini adalah CSS. Dan luar biasa, ini berhasil. :-)
TJ Crowder

15
Bekerja di WebKit dan IE sejauh yang saya tahu. Firefox tampaknya menjadi satu-satunya yang tidak suka di sel tabel. Dan ya, saya mencoba memposisikan elemen di dalam <td> tanpa harus bergantung pada pelampung.
Ben Johnson

2
Sekali lagi, lihat jawaban Justin. Ini berfungsi dengan baik di Firefox jika Anda memberi tahu Firefox bahwa Anda memperlakukannya sebagai blok alih-alih sebagai elemen tabel.
TJ Crowder

1
Jsfiddle mendemonstrasikan masalah dalam pertanyaan ini: jsfiddle.net/M5P93 Bekerja di IE, Safari, Chrome; Firefox gagal.
Chris Moschini

Jawaban:


167

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>

11
+1 Ini adalah satu-satunya solusi yang berfungsi untuk saya. Menggunakan tr {display:block}tata letak sepenuhnya hancur.
Wesley Murch

+1 Ini adalah jawaban untuk saya juga. display: blocktidak cukup untuk memperbaiki tata letak tabel yang kompleks. Extra div adalah solusi yang lebih andal.
DA.

5
tetapi, dengan solusi ini "lebar" dan "tinggi" masih tidak dapat digunakan
4esn0k

@ 4esn0k apakah Anda menemukan solusi di mana Anda dapat menggunakan lebar dan tinggi?
Neil

9
Sayangnya, solusi Anda tidak berfungsi jika Anda menambahkan kolom lain dengan lebih banyak konten di dalamnya daripada yang lain. Jadi saya tidak mengerti bendera "jawaban yang diterima" dan banyak penghargaan yang diberikan oleh suara. Silakan periksa jsfiddle.net/ukR3q
Jan

35

Seharusnya tidak ada masalah. Ingat juga untuk mengatur:

display: block;

32
Kelemahan dari pengaturan tampilan: blok tampaknya dapat benar-benar mengacaukan pemformatan tabel jika diterapkan langsung ke elemen. Karena itu mengubahnya dari sel tabel ... atau aku gila?
Ben Johnson

3
@ Ben: Ya, ya. Pengaturan positionpada sel tabel, secara definisi, secara serius mengubah format tabel. Anda mengambil blok sel keluar dari aliran (kecuali untuk position: relative, di mana ia tetap di aliran tetapi diimbangi dari itu).
TJ Crowder

2
@ Ben - Tidak, tidak gila. Anda pasti harus melakukan lebih banyak pekerjaan untuk mendapatkan hal-hal yang Anda inginkan. Intinya hanyalah bahwa itu mungkin.
Justin Niessner

1
@ TT Ini bukan menambahkan posisi: relatif yang mengubah tampilan visual, itu mengubah th / td dari tabel-sel untuk memblokir. Sekali lagi, senang mengetahui bahwa itu berfungsi, tetapi dalam banyak kasus membuat elemen level blok akan sangat mengacaukan pemformatan tabel. Terima kasih Justin!
Ben Johnson

9
sayangnya, display: blockjuga dapat menyebabkan masalah di Firefox - yaitu jika sel tabel merentang kolom, mengaturnya untuk memblokir akan meruntuhkan sel ke kolom pertama.
DA.

13

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();

    }

});

$ .browser telah dihapus di jQuery 1.9
Matus

ya. jadi gantikan dengan metode deteksi browser favorit Anda.
mrbinky3000

1
Peramban tidak rusak. Spesifikasi mengatakan bahwa efeknya tidak terdefinisi.
WGH

4
@WGH Tidak membuat solusi yang kurang tepat. Terima kasih untuk downvote.
mrbinky3000

1
Hai, saya baru saja membuat polyfill dari komit Anda, lihat itu! :) github.com/Grawl/gecko-table-position-polyfill
Даниил Пронин

11

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


7

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


Lihat jawaban Justin. Ini berfungsi, asalkan Anda mengubah displaypengaturan. Yang masuk akal (ke tingkat CSS masuk akal).
TJ Crowder

8
Ya, itu "bekerja" kecuali menerapkannya ke sel benar-benar merusak meja Anda ... Agak sia-sia dalam hal itu.
Simon East

3

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.


1

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.


0

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>

0

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/

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.