[TOP] [戻る]
<テーブル>  *  テーブル・セルにスクロールバーをつける * 


  • テーブルにスクロールバーをつける
  • セルにスクロールバーをつける
  • スクロールバーの色を変える





  • ■ テーブルにスクロールバーをつける
    テーブル
     
    テーブル
     
    テーブル


     ソース 
    <div style="height:100px; width:300px; overflow-y:scroll;">
    <table border=1 height="100" width="300" bgcolor="#9999ff"><tr><td>
       表示したいテーブル
    </td></tr></table>
    </div>


    overflow-y:scroll (テーブル横にスクロールバーの表示)
    overflow-x:scroll (テーブル下にスクロールバーの表示)
    overflow:scroll (テーブル横・下にスクロールバーの表示)
    overflow-y:auto (内容に応じて横にスクロールバーの表示)
    overflow-x:auto (内容に応じて下にスクロールバーの表示)
    overflow:auto (内容に応じて横・下にスクロールバーの表示)


    ■ セルにスクロールバーをつける
    セル1
    セル2

    ABCD
    EFGH
    IJKL
    MNOP
    QRST
    UVWX
    YZ
    セル1
    セル2

    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    セル1
    セル2

    ABCDEFGHIJKLMNOPQRSTUVWXYZ


     ソース 
    <table border="1" width="200" height="100" bgcolor="#9999ff">
    <tr><td width="100" height="100">
    セル1
    </td><td width="100" height="100">
    <div style="height:100px; width:100px; overflow-x:scroll;">
    セル2
    </div>
    </td></tr>
    </table>


    ■ スクロールバーの色を変える
    テーブル
     


     ソース 
    <div style="height:100px; width:300px; overflow-y:scroll; scrollbar-base-color:#99ff66 ; scrollbar-arrow-color:#ff0000;">
    <table border=1 height="100" width="300" bgcolor="#ccffcc"><tr><td>
       表示したいテーブル
    </td></tr></table>
    </div>

     スタイルの指定
         scrollbar-base-color: #99ff66  (スクロールバーの色)
         scrollbar-arrow-color: #cc0000  (上下の矢印の色)










    [TOP] [戻る]

    Copyright (C) 2006, Etuko Matida all rights reserved.