Czy Firefox obsługuje położenie: względne w elementach tabeli?

Kiedy próbuję użyć position: relative/ position: absolutena <th>lub <td>w Firefoksie, nie działa.

Najłatwiejszym i najwłaściwszym sposobem byłoby zawinięcie zawartości komórki w element div i dodanie pozycji: względem tego elementu div.

przykład:

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

To nie powinno stanowić problemu. Pamiętaj, aby ustawić również:

display: block;

Ponieważ każda przeglądarka internetowa, w tym Internet Explorer 7, 8 i 9, poprawnie obsługuje pozycję: względną w elemencie wyświetlania tabeli i tylko FireFox obsługuje to nieprawidłowo, najlepszym rozwiązaniem jest użycie podkładki JavaScript. Nie powinieneś musieć zmieniać kolejności DOM tylko dla jednej wadliwej przeglądarki. Ludzie używają podkładek JavaScript przez cały czas, gdy IE coś nie działa, a wszystkie inne przeglądarki robią to dobrze.

Tutaj jest kompletnie opatrzony adnotacjami jsfiddle z wyjaśnieniem wszystkich HTML, CSS i JavaScript.

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

Mój powyższy przykład jsfiddle wykorzystuje techniki „Responsive Web Design” tylko po to, aby pokazać, że będzie działać z responsywnym układem. Jednak Twój kod nie musi być responsywny.

Oto JavaScript poniżej, ale nie będzie to miało większego sensu poza kontekstem. Sprawdź powyższy link jsfiddle.

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

    }

});

Począwszy od przeglądarki Firefox 30, będziesz mógł używać positionskładników tabel. Możesz spróbować samemu z obecną wersją nightly (działa jako samodzielna): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Przypadek testowy ( 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>

Możesz kontynuować dyskusję deweloperów na temat zmian tutaj (temat ma 13 lat ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Sądząc po najnowszej historii wydań , może to być dostępne już w maju 2014. Ledwo mogę powstrzymać moje podekscytowanie!

EDYCJA (10.06.14): Dzisiaj wydano przeglądarkę Firefox 30. Wkrótce pozycjonowanie tabel nie będzie problemem w głównych przeglądarkach komputerowych

W Firefoksie 3.6.13 pozycja: względna / bezwzględna nie wydaje się działać na elementach tabeli. Wydaje się, że jest to długotrwałe zachowanie Firefoksa. Zobacz: http://csscreator.com/node/31771

Link do kreatora CSS publikuje następujące odniesienie W3C:

Efekt pozycji: względna na elementy grupy wierszy tabeli, grupy nagłówków tabeli, grupy stopek tabeli, wiersza tabeli, grupy kolumn tabeli, kolumny tabeli, komórki tabeli i nagłówki tabeli jest niezdefiniowana. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Spróbuj użyć display:inline-blockgo w Firefoksie 11, dając mi możliwość pozycjonowania w td / th bez niszczenia układu tabeli. To w połączeniu z position:relativena td / th powinno sprawić, że wszystko będzie działać. Po prostu uruchomiłem to sam.

Miałem table-cellelement (który właściwie DIVnie był a TD)

Wymieniłem

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

(który działał w Chrome) z

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

Oczywiście w modelu pudełkowym do szerokości zwykle dodaje się wypełnienie - ale tabele zawsze wydają się mieć własny umysł, jeśli chodzi o szerokości bezwzględne - więc to zadziała w niektórych przypadkach.

Dodanie display: block do elementu nadrzędnego sprawiło, że działa to w przeglądarce Firefox. Musiałem też dodać top: 0px; po lewej: 0px; do elementu nadrzędnego, aby Chrome działał. IE7, IE8 i IE9 również działają.

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

Przyjęte rozwiązanie działa, ale nie jeśli dodasz kolejną kolumnę z większą zawartością niż w drugiej. Jeśli dodasz height:100%do swoich tr , td i div, to powinno działać.

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

Jedynym problemem jest to, że rozwiązuje to tylko problem z wysokością kolumny w FF, a nie w Chrome i IE. Więc to krok bliżej, ale nie idealnie.

Zaktualizowałem skrzypce Jana, które nie działały, z zaakceptowaną odpowiedzią, aby pokazać, że działa. http://jsfiddle.net/gvcLoz20/