Fixed Header & Fixed Column Table

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>

Rozalin

Can you please clarify more about your problem? I couldn't understand your desired output. – Luvenialuwana

The header is alright but the problem is in the first column. I want the First column to be fixed so when i scroll to the right the column won't disappier. – Rozalin

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>

Pressley