Fixed Header & Fixed Column Table

问题

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>

回答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>

来源：https://stackoverflow.com/questions/50836604/fixed-header-fixed-column-table