Fixed Header & Fixed Column Table - html

Question

I have a problem with my fixed header and fixed column table. The header is fixed but the column isn't. So how do I fix this problem? I have tried to give the first column position: fixed but it doesn't work right. If possible without Javascript. (I have tried to find solutions from earlier questions of the same topic but none of those helped me). Here is my Codepen.
body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
max-height: 70px;
position: relative;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h3>World Cup 2018</h3>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th>Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th>Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th>Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th>Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th>Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>

Answer 1

body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
thead {
position: sticky;
top: 1px;
z-index: 9999;
}
tbody {
height: 80px;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
.fixed {
position: sticky;
width: 5em;
left: 0;
top: auto;
z-index: 999;
}
td:not(.fixed) {
z-index: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="conatiner">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th class="fixed">Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed">Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th class="fixed">Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th class="fixed">Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th class="fixed">Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>
</div>