document.write("<table style=\"margin:1em;\">");
document.write("<tr>");
document.write("<td><code>overflow : visible ;</code></td>");
document.write("<td><code>overflow : hidden ;</code></td>");
document.write("<td><code>overflow : scroll ;</code></td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td><div style=\"overflow : visible ; height : 150px ; width : 200px ; border : 1px solid gray ;\">はみ出した内容を指定された幅や高さの内容領域からあふれて表示する。ただし、Win版Internet Explorer 6 では、勝手にボックスの幅や高さを拡張してくれちゃいます。どうですか、この辺の内容はちゃんとあふれて表示されていますか？</div></td>");
document.write("<td><div style=\"overflow : hidden ; height : 150px ; width : 200px ; border : 1px solid gray ;\">内容領域を超えるものは切り取られ、スクロールバーをつけない。hiddenの注意点として、内容が切り取られるということは、切り取られてしまった部分に書かれていた情報にはアクセスすることもできなくなってしまいます。つまり、この辺の内容も切り取られてしまっているためにアクセスできないのです。</div></td>");
document.write("<td><div style=\"overflow : scroll ; height : 150px ; width : 200px ; border : 1px solid gray ;\">内容領域を超える・超えないにかかわらず、常にスクロールバーをつける。</div></td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td style=\"padding:2em 0 0 0;\">A, <code>overflow : auto ;</code></td>");
document.write("<td style=\"padding:2em 0 0 0;\">B, <code>overflow : auto ;</code></td>");
document.write("<td style=\"padding:2em 0 0 0;\" rowspan=\"2\"></td>");
document.write("</tr>");
document.write("<tr>");
document.write("<td><div style=\"overflow : auto ; height : 150px ; width : 200px ; border : 1px solid gray ;\">User-Agent（ユーザーエージェント）に依存、内容領域を超える場合はスクロールバーをつける。もうひとつ用意したBバージョンでは、はみ出さない程度に内容を少なくしていますが、Aバージョンは、内容がフローするように調節してみました。</div></td>");
document.write("<td><div style=\"overflow : auto ; height : 150px ; width : 200px ; border : 1px solid gray ;\">autoのはみ出しなしver。</div></td>");
document.write("</tr>");
document.write("</table>");