Fix table header at scroll with dynamic table th width

Question

I want to make a table with it's header fix while scrolling at top while it's th width will vary according to data it's td contains. I am able to make a fixed header while scrolling.

table {
  width: 500px;
  border-collapse: collapse;
}

thead {
  display: block;
  width: 500px;
  overflow: auto;
  color: #fff;
  background: #000;
}

tbody {
  display: block;
  width: 500px;
  height: 100px;
  background: pink;
  overflow: auto;
}

th,
td {
  padding: .5em 1em;
  text-align: left;
  vertical-align: top;
  border-left: 1px solid #fff;
}

<h2>HTML Table</h2>

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

But the problem is that I have to assign width to each th differently:

th:nth-child(1){
      width: 50px;
}
th:nth-child(2){
      width: 20px;
}
th:nth-child(3){
      width: 20px;
}  

But I want to make <th> width also dynamic.