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

169

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

Ben Johnson
źródło
3
Nie, myślę, że żadna przeglądarka nie obsługuje tego poprawnie. To nie jest legalne w żadnym standardzie HTML AFAIK
Pekka
2
@Pekka: HTML nie wchodzi w grę, to jest CSS. I zadziwiająco, to działa. :-)
TJ Crowder
15
O ile wiem, działa w WebKit i IE. Firefox wydaje się być jedynym, który nie lubi tego na komórkach tabel. I tak, próbuję umieścić elementy wewnątrz <td> bez konieczności polegania na pływakach.
Ben Johnson,
2
Ponownie spójrz na odpowiedź Justina. Działa dobrze w Firefoksie, jeśli powiesz Firefoxowi, że traktujesz go jako blok, a nie jako element tabeli.
TJ Crowder
1
Jsfiddle demonstrujący problem w tym pytaniu: jsfiddle.net/M5P93 Działa w IE, Safari, Chrome; Firefox nie działa.
Chris Moschini

Odpowiedzi:

167

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>
DavidJonas
źródło
11
+1 To jedyne rozwiązanie, które u mnie zadziałało. Użycie tr {display:block}całkowicie psuje układ.
Wesley Murch
+1 To jest odpowiedź również dla mnie. display: blocknie jest wystarczającym rozwiązaniem w przypadku złożonych układów tabel. Dodatkowy div to rozwiązanie, które jest bardziej niezawodne.
DA.
5
ale w przypadku tego rozwiązania „szerokość” i „wysokość” nadal nie mogą być używane
4esn0k
@ 4esn0k Czy znalazłeś rozwiązanie, w którym możesz użyć szerokości i wysokości?
Neil
9
Niestety, twoje rozwiązanie nie działa, jeśli dodasz kolejną kolumnę z większą zawartością niż w drugiej. Dlatego nie rozumiem flagi „zaakceptowana odpowiedź” i wielkiego uznania, jakie dają głosy za. Proszę sprawdzić jsfiddle.net/ukR3q
styczeń
35

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

display: block;
Justin Niessner
źródło
32
Wadą ustawienia display: block wydaje się być to, że może naprawdę zepsuć formatowanie tabeli, jeśli zostanie zastosowane bezpośrednio do elementu. Ponieważ zmienia to z komórki stołowej ... czy jestem szalony?
Ben Johnson
3
@Ben: Cóż, tak. Ustawienie positionw komórce tabeli z definicji poważnie zmienia formatowanie tabeli. Wyciągasz blok komórki z przepływu (z wyjątkiem sytuacji position: relative, gdy pozostaje w przepływie, ale odsuwa się od niego).
TJ Crowder
2
@Ben - Nie, nie szalony. Na pewno będziesz musiał wykonać więcej pracy, aby wszystko wyglądało tak, jak chcesz. Chodzi tylko o to, że jest to możliwe.
Justin Niessner
1
@TJ To nie jest dodanie pozycji: względna, która zmienia wygląd, zmienia th / td z komórki tabeli na blok. Ponownie, miło jest wiedzieć, że to działa, ale w wielu przypadkach tworzenie elementów na poziomie bloków naprawdę zepsuje formatowanie tabeli. Dzięki Justin!
Ben Johnson
9
niestety, display: blockmoże również powodować problemy w przeglądarce Firefox - a mianowicie, jeśli komórka tabeli obejmuje kolumny, ustawienie jej na blok spowoduje zwinięcie komórki do pierwszej kolumny.
DA.
13

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

    }

});
mrbinky3000
źródło
$ .browser został usunięty w jQuery 1.9
Matus
tak. więc zastąp ulubioną metodą wykrywania przeglądarki.
mrbinky3000
1
Przeglądarka nie jest wadliwa. Specyfikacja mówi, że efekt jest nieokreślony.
WGH
4
@WGH Nie sprawia, że ​​rozwiązanie jest mniej poprawne. Dzięki za głos przeciw.
mrbinky3000
1
Hej, właśnie stworzyłem polyfill z twojego zatwierdzenia, spójrz na to! :) github.com/Grawl/gecko-table-position-polyfill
Даниил Пронин
11

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

aebabis
źródło
7

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

Ben Johnson
źródło
Zobacz odpowiedź Justina. Działa, pod warunkiem, że zmienisz displayustawienie. Co ma sens (o ile CSS ma sens).
TJ Crowder
8
Tak, to "działa" z tym wyjątkiem, że zastosowanie go do komórek całkowicie niszczy twój stół ... Trochę bezcelowe w tym przypadku.
Simon East,
3

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.

Jonathan Dorsey
źródło
1

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.

Simon_Weaver
źródło
0

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>
GrantE
źródło
0

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/

Ben
źródło