css - Scroll bar added a giant gap in my html5 table? -

i making table in html5 , css. when try add scroll bar, giant gap appears in table between header , body. here code:

http://jsfiddle.net/aaronjohnson/u23g9/

html5 code:

<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 code:

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; } 

the gap because header row being treated tbody element, has fixed height of 100 pixels.

wrap in thead , gap no longer present.

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