overflow-y:auto のスタイルを付けた div でラップするだけ。
<html> <head> <title>Table Test</title> <style type="text/css"> <!-- /* overflow を指定して内側の table をスクロールさせる */ #list-view { overflow-x: hidden; overflow-y: auto; border: 1px solid black; height: 200px; width: 300px; } /* 外側の div に横幅をあわせる */ #list-table { width: 100%; } #list-table tbody { width: 100%; } /* 項目が分かりやすいように線で囲む */ #list-table td { border: 1px solid black; } --> </style> </head> <body> <div id="header"> <h1>Table Test</h1> </div> <div id="main"> <div id="list-view"> <!--この table が外側の div からはみ出るときスクロールする--> <table id="list-table"> <tbody> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> <tr><td>Test</td></tr> </tbody> </table> </div> </div> </body> </html>
Web デザイナなら、こんなの迷わずに一瞬で書けるんでしょうね。CSS ムズカシイ。