ブロック要素にスクロールバーが出る場合の、内部領域の変化（IE注意）

ブロック要素にスクロールバーが出る場合、
その内部領域がどうなるのか、ブラウザごとにまとめ。

HTMLの例は以下のような感じ：

<div class="outline">
	<table>
		.....
	</table>
</div>

CSSは以下のような感じ：

.outline {
	width: 500px;
	height: 300px;
	overflow: auto;
}
.outline table {
	width: 100%;
}

table要素の高さが300pxを超えると、
親のdiv要素に縦スクロールバーが出る。
このとき、table要素の幅100%というのは、何ピクセルになるのか、を各ブラウザごとにまとめると、
以下のような感じになる。

• IE6
  スクロールバーの有無に関わらず、同じ。
  ただし、子要素のtableが幅100%のときは、スクロールバーは領域の外側に表示される。
  
  [対策]
  見た目を気にしないなら、とくに何もしない。
  スクロールバーを外側にはみ出させたくない場合は、子要素の幅をスクロールバー分だけ引いたサイズにしておく。
  IE6は固定幅レイアウトが前提。

• IE7
  スクロールバーの有無に関わらず、同じ。
  ただし、スクロールバーが子要素の上に重なるので、子要素のtableが幅100%のときは、tableの右端がスクロールバーの下に隠れる。
  
  [対策]
  子要素のpadding-rightでスクロールバー分を指定しておく。
  tableの場合は、各行の最後のthまたはtdのpadding-right。これでリキッドレイアウトでも対応可。

• IE8とそのほかのブラウザ
  スクロールバーが表示されると、内部の領域はその分だけ縮まる。
  子要素のtableが幅100%のとき、スクロールバーの有無によって100%のピクセル数は変わる。
  
  [対策]
  レイアウトの崩れが問題にならないなら、とくに何もしない。
  問題になるケースは、個別に対応策を考える。