親divの外側にある左マージンシフトテーブル

Question

div内にテーブルを配置し、テーブル幅を100％に設定しました。私はdiv内のテーブルの左側にアイコンを配置していますので、margin-leftプロパティを使用してテーブルをシフトし、position:absoluteとtopとleftプロパティを使用してアイコンを配置します。これはうまくいきますが、表の幅は親divの外側に移動します。明らかにleft-marginの設定のためです。ブラウザウィンドウの幅に応じてテーブルを動的に拡張する必要があるので、div内にテーブルを保持するために固定サイズを設定することはできません。最終的には、テーブル内のdivコンテンツをすべてラップし、そのように要素をレイアウトすることができましたが、私のCSSを調整することによって、より良い、より単純なソリューションが得られることを願っていました。ありがとう！私が達成しようとしている何

：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +---------------------------------------------------------+| 
|   | (table)             || 
|   |               || 
|   +---------------------------------------------------------+| 
+--------------------------------------------------------------------+ 

私は何を取得しています：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +----------------------------------------------------------|-------+ 
|   | (table)             |  | 
|   |               |  | 
|   +----------------------------------------------------------|-------+ 
+--------------------------------------------------------------------+ 

アップデート：すべての提案のための
感謝。答えがさらに長くなってしまったので、答えが私にもたらされました。私はwidth:100%は、 "塗りつぶしが親要素の境界内にとどまる"ことを意味し、 "親要素の指定された幅を取る"とは考えていませんでした。 margin-left:80pxのプロパティがテーブルに設定されていたので、私はそれを削除してdivのpadding-left:80pxを設定して問題を修正しました。

@Ace - 私は本当に "私にすべての仕事をするように人々に求めていませんでした"。私が何を正確に記述したので、私は非常にシンプルなCSSが必要ではないと思ったが、役に立つと思った。

オリジナルCSSを：：だから、ここでそれが働いた最終CSSと一緒に、ある

.mydiv { 
position:relative; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
margin-left:80px; 
} 

決勝CSS：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
} 

Answer 1

削除テーブルのmargin-left:80pxとのdivコンテナにpadding-left:80px追加：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
} 

Answer 2

あなたがICONでCSSの背景画像作る場合DIVをラップすると、必要なのはテーブル上に余白が残っており、すべてがうまくいくでしょう。

Answer 3

はこれを試してみてください。

#tableID{ 
    left:100px; // the margin left 
    right:10px; 
} 

それはdivタグに動作しますが、テーブルの上にしようとしなかった