Чи підтримує Firefox положення: відносно елементів таблиці?

Коли я намагаюся використовувати position: relative/ position: absoluteна <th>або <td>в Firefox, здається, це не працює.

Найпростішим і правильним способом було б загортати вміст комірки у діл та додавати положення: відносно цього діла.

приклад:

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

Це не повинно бути жодних проблем. Не забудьте також встановити:

display: block;

Оскільки кожен веб-браузер, включаючи Internet Explorer 7, 8 і 9, правильно обробляє положення: відносно елемента відображення таблиці та лише FireFox обробляє це неправильно, найкраще зробити, щоб використовувати прошивку JavaScript. Вам не доведеться переставляти DOM лише для одного несправного браузера. Люди користуються JavaScript shims весь час, коли IE отримує щось не так, і всі інші браузери розуміють це правильно.

Ось повністю анотована jsfiddle з усіма поясненими HTML, CSS та JavaScript.

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

Мій приклад jsfiddle вище використовує методи "Чуйний веб-дизайн" лише для того, щоб показати, що він буде працювати з чуйним компонуванням. Однак ваш код не повинен відповідати.

Ось JavaScript нижче, але це не дасть такого сенсу поза контекстом. Перевірте посилання 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();

    }

});

Починаючи з Firefox 30, ви зможете використовувати positionна компонентах таблиці. Ви можете спробувати себе з поточною нічною збіркою (працює як окрема): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Тестовий випадок ( 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>

Ви можете продовжувати стежити за обговоренням розробниками змін тут (темі 13 років ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Судячи з недавньої історії випусків , це може бути доступне вже в травні 2014 року. Я ледве стримую своє хвилювання!

EDIT (6/10/14): Firefox 30 вийшов сьогодні. Незабаром позиціонування таблиць не стане проблемою в основних браузерах настільних ПК

Станом на Firefox 3.6.13, позиція: відносні / абсолютні, здається, не працюють на елементах таблиці. Це, здається, вже давно поводиться Firefox. Дивіться наступне: http://csscreator.com/node/31771

Посилання CSS Creator розміщує таку посилання на W3C:

Вплив 'позиція: відносна' на групу рядків таблиці, групи заголовків таблиці, групу колонтитулів таблиці, рядок таблиці, групу стовпців-групи, стовпчик таблиці, клітинку таблиці та підписи таблиці. не визначено. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Спробуйте використовувати display:inline-blockце працювало для мене у Firefox 11, даючи мені можливість позиціонування в межах td / th, не руйнуючи компонування таблиці. Це в поєднанні з position:relativetd / th повинно змусити роботу працювати. Просто працював сам.

У мене був table-cellелемент (який насправді був DIVне a TD)

Я замінив

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

(яка працювала в Chrome) з

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

Звичайно, прокладки зазвичай додаються до ширини в коробковій моделі, але, мабуть, таблиці завжди мають власний розум, коли мова йде про абсолютні ширини - тому це буде працювати в деяких випадках.

Додавання дисплея: блок до батьківського елемента отримав це працює у firefox. Я також повинен був додати верх: 0px; зліва: 0px; до батьківського елемента, щоб Chrome працював. IE7, IE8 і IE9 також працюють.

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

Прийняте рішення типу працює, але не, якщо ви додасте інший стовпець з більшою кількістю вмісту, ніж в іншому. Якщо ви додасте height:100%до свого tr , td & div, він повинен працювати.

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

Єдина проблема полягає в тому, що це виправляє проблему лише з висотою стовпця у FF, а не в Chrome та IE. Тож це на крок ближче, але не ідеально.

Я оновив загадку від Яна, яка не працювала з прийнятою відповіддю, щоб показати, що вона працює. http://jsfiddle.net/gvcLoz20/