SOURCE

<div id="scrollTable">
    <table class="thead">
        <col width="170px"></col> 
        <col width="170px"></col> 
        <col width="170px"></col>
        <col></col>
        <tbody>
            <tr>
                <th>名称</th>
                <th>语法</th>
                <th>说明</th>
                <th>例子</th>
            </tr>
      </tbody>
    </table>
    <div>
      <table class="tbody"> 
      <col width="170px"></col>
      <col width="170px"></col> 
      <col width="170px"></col>
      <col></col>
        <tbody>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
        </tbody>
      </table>
    </div>
</div>

 #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
    }
    #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
    }
    /*表头 div的第一个子元素**/
    #scrollTable table.thead{
        width:100%;
    }
    /*表头*/
    #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
    }

    /*能带滚动条的表身*/
    /*div的第二个子元素*/
    #scrollTable div{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
        scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
        scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
        scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
        scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
        scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
        scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
    }

    /*能带滚动条的表身的正体*/
    #scrollTable table.tbody{
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
    }

    /*能带滚动条的表身的格子*/
    #scrollTable table.tbody td{
        border:1px solid #C96;
    }