Firefoxは位置をサポートしていますか：テーブル要素の相対的ですか？

私が使用しようとするとposition: relative/ position: absolute上<th>または<td>Firefoxでそれが動作するようには思えません。

セルのコンテンツをdivでラップし、そのdivに対してposition：relativeを追加するのが簡単で適切な方法です。

例：

<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を含むすべてのWebブラウザーがtable-display要素のposition：relativeを正しく処理し、FireFoxのみがこれを正しく処理しないため、最善の策はJavaScriptシムを使用することです。1つの障害のあるブラウザーのためだけにDOMを再配置する必要はありません。IEで問題が発生し、他のすべてのブラウザで問題が発生すると、人々は常にJavaScriptシムを使用します。

これは、HTML、CSS、JavaScriptのすべてが説明された、完全に注釈が付けられたjsfiddleです。

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

上記のjsfiddleの例では、レスポンシブレイアウトで機能することを示すために、「レスポンシブWebデザイン」手法を使用しています。ただし、コードがレスポンシブである必要はありません。

以下は、以下の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年5月に入手可能になる可能性があります。

編集（2014年6月10日）： Firefox 30が本日リリースされました。すぐに、主要なデスクトップブラウザではテーブルの配置は問題にならない

Firefox 3.6.13以降、position：relative / absoluteはテーブル要素で機能しないようです。これは、長年のFirefoxの動作のようです。次を参照してください：http : //csscreator.com/node/31771

CSS Creatorリンクは、次のW3Cリファレンスを投稿します。

table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、およびtable-caption要素に対する「position：relative」の影​​響未定義です。http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

display:inline-blockテーブルのレイアウトを壊すことなくtd / th内でのポジショニング機能を与えてくれるFirefox 11で機能するそれを使ってみてください。連動しているposition:relativeTD /番目に物事を仕事にするべきです。自分で機能させたところです。

私はtable-cell要素を持っていました（実際にはではありDIVませんでしたTD）

交換しました

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

（これはChromeで機能しました）

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

もちろん、パディングは通常、ボックスモデルの幅に追加されます-しかし、絶対幅に関しては、テーブルは常に独自の考え方を持っているように見えるので、これは場合によっては機能します。

親要素にdisplay：blockを追加すると、これがFirefoxで機能します。また、top：0pxを追加する必要がありました。left：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では修正されないことです。したがって、これは一歩近づきますが、完璧ではありません。

Janからのフィドルを更新し、承認された回答で機能していなかったことを示しました。 http://jsfiddle.net/gvcLoz20/