给表格加滚动条并改样式

样式如下：

              <div class="panel-body" style="padding:10px;">
                <div style="float:left;width:100%;margin-top:0px;margin-left:0px;">
                  <span><strong>商品销售排行</strong></span>
                </div>
                <div class="clear"></div>
                <table class="table" border="0">
                  <thead >
                  <tr class="thead">
                    <th width="60px">榜单</th>
                    <th>商品名称</th>
                    <th>商品名称</th>
                    <th>销售量</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td width="60px"><span class="label label-danger">1</span></td>
                    <td align="left">Steve</td>
                    <td align="left">$122</td>
                    <td align="left">Oct 21, 2016</td>
                  </tr>
                  <tr>
                    <td width="60px"><span class="label label-danger">2</span></td>
                    <td align="left">Amber</td>
                    <td align="left">$62</td>
                    <td align="left">Oct 21, 2016</td>
                  </tr>
                  <tr>
                    <td width="60px"><span class="label label-danger">3</span></td>
                    <td align="left">Michael</td>
                    <td align="left">$34</td>
                    <td align="left">Oct 18, 2016</td>
                  </tr>
                  <tr>
                    <td width="60px"><span class="label label-danger">3</span></td>
                    <td align="left">Michael</td>
                    <td align="left">$34</td>
                    <td align="left">Oct 18, 2016</td>
                  </tr>
                  <tr>
                    <td width="60px"><span class="label label-danger">3</span></td>
                    <td align="left">Michael</td>
                    <td align="left">$34</td>
                    <td align="left">Oct 18, 2016</td>
                  </tr>
                  <tr>
                    <td width="60px"><span class="label label-danger">3</span></td>
                    <td align="left">Michael</td>
                    <td align="left">$34</td>
                    <td align="left">Oct 18, 2016</td>
                  </tr>
                  </tbody>
                </table>
                <!---->
              </div>

注：以<thead> </thead>为表头，以<tbody></tbody>为表格内容作为导航栏的高度

1. 关键设置 tbody出现滚动条

.table tbody {
    display: block;
    height: 110px;
    overflow-y: scroll;
    color: #676A6C;
   }
  .table thead,tbody tr {
    color: #676A6C;
     display: table;
     width: 100%;
     table-layout: fixed;
  }

 2. 关键设置：滚动条默认宽度是16px 将thead的宽度减去想要的宽度，我这里是20px

.table thead {
    color: #787575;
    width: calc( 100% - 20px);
    height: calc( 100% - 20px);
  }

以上设置就可以出现滚动条，并可以滑动，样式如下

3. 美化滚动条

.table ::-webkit-scrollbar {/*默认宽度16，我这里隐藏*/
    width: 0px;
  }
  ::-webkit-scrollbar-track {
    background-color: white;
  } /* 滚动条的滑轨背景颜色 */

  ::-webkit-scrollbar-thumb {
    background-color: #DCDCDC;
  } /* 滑块颜色 */

  ::-webkit-scrollbar-button {
    height: 1px;
    background-color: white;
  } /* 滑轨两头的监听按钮颜色 */

  ::-webkit-scrollbar-corner {
    background-color: #676A6C;
  } /* 横向滚动条和纵向滚动条相交处的颜色 */

设为默认宽度，样式如下