Tabla HTML con 100% de ancho, con desplazamiento vertical dentro de tbody

¿Cómo puedo configurar el <table>ancho al 100% y poner solo <tbody>el desplazamiento vertical interior para un poco de altura?

table {
 width: 100%;
 display:block;
}
thead {
 display: inline-block;
 width: 100%;
 height: 20px;
}
tbody {
 height: 200px;
 display: inline-block;
 width: 100%;
 overflow: auto;
}
 

<table>
 <thead>
 <tr>
 	<th>Head 1</th>
 	<th>Head 2</th>
 	<th>Head 3</th>
 	<th>Head 4</th>
 	<th>Head 5</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 	<td>Content 1</td>
 	<td>Content 2</td>
 	<td>Content 3</td>
 	<td>Content 4</td>
 	<td>Content 5</td>
 </tr>
 </tbody>
</table>

Solución del problema

solo CSS

para Chrome, Firefox, Edge (y otros navegadores perennes )

Simplemente position: sticky; top: 0;sus thelementos:

/* Fix table head */
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }
/* Just common table stuff. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }

<div class="tableFixHead">
 <table>
 <thead>
 <tr><th>TH 1</th><th>TH 2</th></tr>
 </thead>
 <tbody>
 <tr><td>A1</td><td>A2</td></tr>
 <tr><td>B1</td><td>B2</td></tr>
 <tr><td>C1</td><td>C2</td></tr>
 <tr><td>D1</td><td>D2</td></tr>
 <tr><td>E1</td><td>E2</td></tr>
 </tbody>
 </table>
</div>