web-dev-qa-db-ja.com

HTMLテーブルを、含まれているdivタグと同じ幅にするにはどうすればよいですか？

Div内にテーブルがあります。テーブルがdivタグの幅全体を占めるようにしたい。

CSSでは、テーブルのwidthを100%に設定しました。残念ながら、divにmarginが含まれている場合、テーブルは、含まれているdivよりも幅が広くなります。

IE6とIE7をサポートする必要があります（これは内部アプリです）。ただし、可能であれば、完全なブラウザー間ソリューションが明らかに必要です。

次のDOCTYPEを使用しています...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

編集：残念ながら、HTMLを動的に生成しているため、幅をハードコードすることはできません。また、divを相互に再帰的にネストすることもできます（各divに左マージンがあるため、ニースが作成されます 'ネストされた効果）。

htmlcss
21
Chris Roberts

以下のCSSを<table>に追加します。

table-layout: fixed;
width: 100%;
17
Sharad Biradar

以下は、FirefoxとIE7で動作します...ガイドラインですが、要素に幅を設定する場合は、同じ要素にマージンやパディングを設定しないでください。これは特に単位（たとえば、パーセントとピクセルの混合）を混合する場合に当てはまります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

例については here を参照してください。

7
Nate

パーセンテージベースの幅は、幅が指定されている最初の親要素を基準にしています。 divに幅が指定されていない場合、テーブルの幅はそれとは関係ありません。 DOMツリーがどのように見えるかを示すマークアップの簡略版を投稿できますか？

別の角度から見ると、親divに幅が設定されていて、マージンがまだテーブルに影響している場合は、おそらく癖モードになっています。 DOCTYPEを指定しましたが、DOCTYPE要素をファイルの最初の行にする必要があることに注意してください。 _IE6_を処理するときに注意すべき他のこと、デフォルトでは、コンテンツが親よりも広い場合、親は対応するように引き伸ばされます。親のcssに_overflow: hidden_を追加することでこれを停止できます要素ですが、その過程で子要素​​のコンテンツの一部が不明瞭になる場合があります。

4
Eric DeLabar

ここで何が問題なのか本当にわかりません-これはIE6/7とFF3で正常に動作します。 .container DIV要素の幅を設定すると、テーブルの幅が設定されます。 .container divにマージンを追加しても、テーブルには影響しません。たぶんあなたのマークアップ/ CSSにレイアウトに影響を及ぼしている何かがあるのでしょうか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>Boxes and Tables</title>
        <style type="text/css">

        div.container {
            background-color: yellow;
            border: 1px solid #000;
            width: 500px;
            margin: 5px auto;
        }

        table.contained {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 2px solid #999;
        }

        </style>
    </head>

    <body>
        <div class="container">
            <table class="contained">
                <thead>
                    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
                </thead>
                <tbody>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
3
David Heggie

ここで問題の核心を見つけました。 border-collapseと関係があります。私はしばらくの間、これと同じ問題を抱えてきました。テーブルの境界線は細いことが多いため、問題はほとんどの人にとって明らかではありません。 Nateのように、div内に幅が100％に設定された通常のテーブルを配置すると、問題ありません。

ただし、テーブルでborder-collapse:collapseを指定すると、テーブルはdivから抜け出します。これは1ピクセルだけで発生する可能性があるため、またはそれが含まれているコンテキストとユーザーエージェントによっては、おそらくまったく発生しないため、ほとんどの人にとって明白ではありません。

何が起こっているのかを明確にするために、次のことを試してください。Nateの例を、David Heggieの例の隣にhtmlファイルで置きます。

どちらも問題なく動作するように見えます。しかし、今度は、NateのインラインTDスタイルをborder: 40px solid blueに変更します。Davidのテーブルのtdスタイルをborder: 40px solid #999;に変更します。この時点で、Davidのテーブルはdivから50％抜けます両側にその境界線の。ネイトはまだ機能します。ネイトのテーブルにborder-collapse:collapseスタイルを置き、ブレイクも今すぐにします。

それを引き起こしているのはborder-collapseです！

2
Chris

マージンがある可能性のあるコードを自動的に生成する場合、テーブルをラップする単純なスタイルなしの<div>要素を追加するとうまくいく場合があります。

1
Nate

私はいつも<table width="100%">

1
Joe Morgan

次のコードは、IE6/8、Chrome、Firefox、Safariで動作します。

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

コピーして貼り付けて、ビルドしてみてください（スタイルパーツをヘッダーまたは別の.cssファイルに移動するだけです）。CSSをインラインで配置する方法（スタイルタグを使用）が問題に関係している可能性があります。それともdivテーブルブロックを囲む他のCSSですか？フローティングも問題を引き起こす可能性があります。

追伸赤と青の境界線を設定して、より視覚的なチェックのために領域がどこに拡大するかを確認します。

0
Nestor

多分この広範な記事 Internet ExplorerとCSSボックスモデル が役に立ちますか？

0
Christian Davén

これが、CSSが幅プロパティを処理する方法の大きな問題と、Microsoftが最初にボックスモデルを異なる方法で実装した理由です。 Microsoftは負け、現在は要素の幅またはマージン/パディング/ボーダーになっています。

box-sizing property を使用すると、CSS3で状況が改善される可能性があります

0
buti-oxa

オーバーフロー：自動;一番外側のdivが奇妙なものを見ている場合に役立ちます。たとえば、一番外側のdivが思ったよりも小さい、またはdivのサイズ全体を占めていないなどです。

0
William

これを試して：

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

divのパディングをゼロに設定すると、divの境界線とそのコンテンツの間のスペースが削除されます。テーブルの幅を100％に設定し、マージンをゼロに設定すると、テーブルの境界線とコンテナの間にあるスペースが削除されます。

0
farzad

ちなみに、厳密なdoctypeを使用しない理由はありますか？ strictは常にデフォルトです。トランジショナルはレガシーコードのみを対象としています。

0
Konrad Rudolph