table 头尾固定，中间滚动

上网试过了很多方法，我总结了一下是以下两种：
法一：用 table 内部属性 thead tbody tfoot
法二：用两个 table 标签

各取所长，整理出一个近乎完美的方法。

html:

    

      

          
              
          
          

              
序号
内容
内容内容内容
          
      
    
    

      

          
            
          
          

              
1
我只是用来测试的
我只是用来测试的
          
      
    

css:

  table{border-collapse: collapse;table-layout:fixed}
  table tr td{border:1px solid #999}
  table tr th{border:1px solid #999}
  .table-head{background-color:#ddd;color:#000;padding-right:17px;}
  .table-body{width:100%; height:300px;overflow-y:scroll;}
  .table-head table,.table-body table{width:100%;}

实现结果图

但当数据少的时候 旁边的滚动条会始终存在

image.png