読者です 読者をやめる 読者になる 読者になる

Google ドキュメントみたいに中身がスクロールするリストを実装するメモ

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>

こんな感じになります。
f:id:griefworker:20110330160412p:image

Web デザイナなら、こんなの迷わずに一瞬で書けるんでしょうね。CSS ムズカシイ。