1

セル内にテーブルがあり、このスクリーンショットに示すように、そのテーブルはセルから「出ています」:

代替テキスト http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png

これは Firefox で見られます。これが「普通」か。どうすればこれを修正できますか?

コード：

<!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">
    <body>
        <table border="1">
            <tr>
                <td>
                    <table border="1" style="margin-left: 3em; width: 100%">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </body>
</html>
4

7 に答える 7

2

内側のテーブルは、コンテナと同じ幅にするように指示されています ( width: 100%)。次に、左端から 3ems 離すように指示されています: ( margin-left: 3em)

最も内側の TD を切り替えて、padding-left役立つ可能性があります。

しかし、ここでの標準的な応答は次のとおりです。

于 2009-01-20T01:58:35.510 に答える
1

未テスト: 'margin-left' を削除し、代わりに 'padding-left' を使用します。

また

親テーブル「td」に左パディングを追加することにより、ネストされたテーブルを使用せずにセルの値をインデントできます。

于 2009-01-20T01:54:11.540 に答える
1

これは、「margin-left: 3em」を設定していて、サブテーブルを外側に押し出しているために発生しています。

于 2009-01-20T01:59:56.507 に答える
0

そのテーブルの「幅」属性を削除するだけで、長いテキストでもセル内にとどまることがわかります。

于 2009-01-20T03:18:09.983 に答える
0

これは、テーブルの幅を 100% に設定しているためです。要素の幅が 100% を超えるように、これにマージンを追加します。これを回避したい場合は、ネストされたテーブルの上に div または何かを追加して、マージンを 3em にすると、テーブルの幅を 100% のままにすることができます。

編集: 彼の答えに対する Jobo のコメントに応えて、tds はマージンをサポートしていません。ただし、代わりに padding-left: 3em が機能するはずです。

于 2009-01-20T01:56:09.103 に答える
0

これを試して：

<!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">
    <body>

        <table border="1">
            <tr>
                <td style="padding-left: 3em;">
                    <table border="1" style="width: 100%;">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <table border="1">
            <tr>
                <td>
                    <table border="1" style="margin-left: 3em; width: 100%">
                        <tr>
                            <td>gaga</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

    </body>
</html>

親TDのTABLE要素からmargin-leftをpadding-leftに変更します（Joboが言ったように）

于 2009-01-20T02:35:36.497 に答える
-2

これは攻撃を意図したものではなく、より優れた開発者になるための支援です。

  1. サブテーブルが必要になることは決してありません。
  2. CSS を使用する場合は、1 つ以上の外部ファイルを正しく使用してください。
  3. これは、Web 開発者として開発するのに役立ちます。ページをどのように構造化するかを考えてから、正しいマークアップを使用してその構造を生成します。マークアップが有効になったら、スタイリングについて心配することができます。
于 2009-01-20T01:57:16.900 に答える