滾動條在我的html5表中添加了一個巨大的差距？

Question

我正在製作HTML5和CSS表格。當我嘗試添加滾動條時，標題和正文之間的表格中會出現一個巨大的間隙。這裏是我的代碼：

http://jsfiddle.net/AaronJohnson/u23g9/

HTML5代碼：

<table id="mytable"> 
    <tr> 
     <th> <span> 
      Playlist 
      </span> 

     </th> 
    </tr> 
    <tbody> 
     <tr> 
      <td> <span> 
      LINK 1 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 2 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 3 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 4 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 5 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 6 
      </span> 

      </td> 
     </tr> 
     <tr> 
      <td> <span> 
      LINK 7 
      </span> 

      </td> 
     </tr> 
    </tbody> 
</table> 

CSS代碼：

table#mytable { 
    width:100%; 
    border-collapse:separate; 
    background:crimson; 
    border-radius: 15px; 
} 
tbody { 
    overflow: auto; 
    height: 100px; 
    float: left; 
    width: 100%; 
} 
td { 
    text-align:center; 
    background:gray; 
    border-bottom:5px solid black; 
    border-radius: 15px; 
} 
th { 
    font-weight:bold; 
    text-align:center; 
    background:crimson; 
    border-bottom:5px solid black; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    float: left; 
    width: 100%; 
} 
tr { 
    width: 100%; 
    display: table; 
} 

Answer 1

的差距，是因爲標題行被視爲另一個tbody元素，其具有100像素的固定高度。

將它換成thead，差距將不再存在。

<table id="mytable"> 
    <thead> 
     <tr> 
      <th><span>Playlist</span></th> 
     </tr> 
    </thead> 
    <tbody> 
     ...