html - 内部 HTML テーブルが全幅ではありません

Question

少し複雑な HTML+CSS の状況を理解し、どうにかして修正したいと考えています。

HTML は GWT アプリケーションによって生成されるため、大量のオーバーヘッドについてコメントしないでください。

私の問題は、青い枠線の内側のテーブルが、赤い枠線の div の水平方向のスペースを完全に占めていないことです。

div と実際のテーブルの間にすべてのレベルを配置しようとしましwidth:100% たが、役に立ちませんでした。実行時に外側の div の幅がわからないため、ネストされたテーブルで正確な幅を繰り返したくありません。

状況を示す jsFiddle は次のとおりです: http://jsfiddle.net/jantekb/NBCcZ/

あなたの答えでは、正しい答えを教えてくれるだけでなく、実際の結果の理由も説明してみてください.後者だけでも高く評価されています.. :-)

score 1 · Accepted Answer

テーブルの1つに100％の幅がない場合、この行を追加すると、違いがわかります。

td > table { width:100%; }

しかし、その混乱にそのCSSを追加するより良い方法を見つける必要があります：D

乾杯。

score 1 · Accepted Answer

table各要素に100％の幅を指定する必要があります。

以下を追加すると、css修正されました。

table{
    width: 100%;
}

score 1 · Accepted Answer

あなたのcssでこれを試してください：

table {
    width: 100%;       
}

これにより、すべてのテーブル要素が親要素の 100% 幅に設定されます。固定幅550pxのdivで制限されている。すべての子要素がテーブルの幅に適合し、適切に調整されます。デフォルトのテーブル幅は、そこに含まれる要素と同じ幅になります。

3 に答える 3