10

テーブル セルがあり、その中の div が常に左下隅にあるようにします。以下は IE と Safari では問題なく動作しますが、Firefox はdivセル内ではなくページ上に絶対に配置しています (ソリューション ソリューションに基づくコードはこちら)。Firefox を Quirks モードと Standards モードにする DTD を使用した場合と使用しない場合の両方をテストしましたが、どちらも正しく動作しませんでした。私は立ち往生しています - 何かアイデアはありますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px; }
        th, td { vertical-align: top; border:1px solid black; position:relative; }
        th { width:100px; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table>
    </body>
</html>
4

7 に答える 7

7

W3Cによると、 position:relative はテーブル セルには影響しません。

「table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、および table-caption に対する 'position:relative' の効果要素が定義されていません。」

解決策は、余分なラッピング div をテーブル セルに追加することです。

編集:この div には、height:100%andposition:relative;を設定する必要があります。

<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>
于 2008-11-14T15:20:48.420 に答える
1

a をテーブルに置くdisplay:blockと、FF は position:relative を尊重します。

于 2010-07-20T15:20:08.623 に答える
1

これがうまくいくかどうかを確認してください。問題の正確な性質はわかりませんが、相対位置で td を使用することに関係があります。テーブルを div タグでラップし、それを相対的に配置しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px;  }
        th, td { vertical-align: top; border:1px solid black; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="body"><table>
        <tr>
                <th>Some info about the following thing and this is actually going to span a few lines</th>
                <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table></div>
    </body>
</html>
于 2008-11-14T15:15:31.520 に答える
0

position: relativetdタグでグローバルにサポートされていないようです。残念ながら決定的なソースは見つかりませんでした。

必要なサイズのdivブロックをに入れ、代わりにそれに適用することができます。tdposition: relative

于 2008-11-14T15:17:41.640 に答える
0

これは非常に明白に聞こえるかもしれませんがvertical-align: bottom;、.manage で使用してみましたか?

于 2008-11-14T15:18:15.553 に答える
0

そうです、position:relative はテーブル要素には効果がなく、firefox はこのルールを適用します。div の解決策は機能しますが、これは私の意見ではひどいマークアップです。

このコンテンツを表示するためにテーブルを使用する必要がありますか? （それとも相性？）

そうでない場合は、div 要素を使用して、やりたいことをしてみませんか?

レイアウトの問題にテーブルを使用するのは1998年です...

于 2008-11-14T15:36:57.623 に答える
0

TD 内に幅: 100%、高さ: 100% の DIV があり、それを位置: 相対に設定します。

于 2008-11-14T15:36:21.633 に答える