html - 固定标题和固定列表

Question

我的固定标题和固定列表有问题。标题是固定的，但列不是。那么我该如何解决这个问题呢？我试图给第一列位置:固定，但它不能正常工作。如果可能的话，不用Javascript。 (我试图从同一主题的早期问题中找到解决方案，但这些都没有帮助我)。这是我的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>