ネガティブマージンを使った段組で、可変幅ブロック内で100%のtableやpreを使う場合のHTML構造とスタイル指定を教えてください。

ネガティブマージンの場合、widthの値は見かけよりもmargin分だけ広い、つまり100%になっています。

子要素のwidthの%指定の場合、親要素のwidthが基準になります。

そのため、包含されるテーブルをなかに収まるように100%指定しようとすると、そのままでは、画面の100%になってしまいます。

解決策としては、ダミーの要素で囲みます。こうすると、この要素は、自動でネガティブマージンの結果のwidthになるので、これに包含されることで、100%で指定できるようになるわけです。

しかし、IEは親がwidth指定のない要素の場合、さらに親にさかのぼって参照して%指定を解釈してしまうので、ダミー要素をおいても失敗します。そこで、IE対策として、さらにもう一段階、包含します。そして内側のダミー要素にだけ、width:100%を指定します。

その他にブラウザ振り分けでIEにだけwidth:100%指定を与える方法もあります。

preについても本質的には同様だと思いますが、提示されているページの言及だけではちょっとよくわかりませんでした。preにもwidth属性がcssではなくhtmlでありますが、これは文字数の指定で、cssでの代替は存在しないようです。

#test2{width:100%;}

table{width:100%;}

<div id=”test”>

<div id=”test2”>

<table>

<tr>

<th>テーブルのサンプル</th><td>うまくいく？</td>

</tr>

<tr>

<th>どうせこんなもん</th><td>ああ</td>

</tr>

</table>

<pre id=”pre”>

対応UAは、IE6, Mozilla, Opera, Safari, MacIE5あたり。Macromedia Contribute 3で更新することを想定してコメントを各所に入れているが、テキストエディタで編集してもいい。

</pre>

</div>

</div>