<div class="container">
  <h1>Estimates between the years 1950 and 1980 (in thousands)</h1>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th class="sticky"><span>Country</span></th>
          <th>1950</th>
          <th>1955</th>
          <th>%</th>
          <th>1960</th>
          <th>%</th>
          <th>1965</th>
          <th>%</th>
          <th>1970</th>
          <th>%</th>
          <th>1975</th>
          <th>%</th>
          <th>1980</th>
          <th>%</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="sticky">
            <span>
              <span class="fi fi-af"></span>
            </span>
            <span>Afghanistan</span>
          </td>
          <td>8,151</td>
          <td>8,892</td>
          <td>1.76</td>
          <td>9,830</td>
          <td>2.03</td>
          <td>10,998</td>
          <td>2.27</td>
          <td>12,431</td>
          <td>2.48</td>
          <td>14,133</td>
          <td>2.60</td>
          <td>15,045</td>
          <td>1.26</td>
        </tr>
        <tr>
          <td class="sticky">
            <span>
              <span class="fi fi-al"></span>
            </span>
            <span>Albania</span>
          </td>
          <td>1,228</td>
          <td>1,393</td>
          <td>2.56</td>
          <td>1,624</td>
          <td>3.12</td>
          <td>1,884</td>
          <td>3.02</td>
          <td>2,157</td>
          <td>2.74</td>
          <td>2,402</td>
          <td>2.17</td>
          <td>2,672</td>
          <td>2.16</td>
        </tr>
        <tr>
          <td class="sticky">
            <span>
              <span class="fi fi-dz"></span>
            </span>
            <span>Algeria</span>
          </td>
          <td>8,893</td>
          <td>9,842</td>
          <td>2.05</td>
          <td>10,910</td>
          <td>2.08</td>
          <td>11,964</td>
          <td>1.86</td>
          <td>13,932</td>
          <td>3.09</td>
          <td>16,141</td>
          <td>2.99</td>
          <td>18,807</td>
          <td>3.10</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="table-credits">Table info by <a href="https://en.wikipedia.org/wiki/List_of_countries_by_past_and_projected_future_population" target="_blank">Wikipedia</a></p>
</div>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET & BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

:root {
  --white: #fff;
  --darkblue: #1b4965;
  --lightblue: #edf2f4;
}

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 50px 0 150px;
  font-family: "Noto Sans", sans-serif;
}

.container {
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
}

h1 {
  font-size: 1.5em;
}

/* TABLE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-wrapper {
  overflow-x: auto;
}

.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--darkblue);
  border-radius: 40px;
}

.table-wrapper::::-webkit-scrollbar-track {
  background: var(--white);
  border-radius: 40px;
}

.table-wrapper table {
  margin: 50px 0 20px;
  border-collapse: collapse;
  text-align: center;
}

.table-wrapper table th,
.table-wrapper table td {
  padding: 10px;
  min-width: 75px;
}

.table-wrapper table .sticky {
  position: sticky;
  left: 0;
  z-index: 10;
  min-width: 150px;
}

.table-wrapper table .sticky,
.table-wrapper table .sticky > * {
  transition: all 0.2s linear;
}

.table-wrapper table th {
  color: var(--white);
  background: var(--darkblue);
}

.table-wrapper table td.sticky {
  display: grid;
  background: var(--white);
}

.table-wrapper table .sticky > * {
  grid-area: 1/1;
  opacity: 0;
}

.table-wrapper table .sticky > span:last-child {
  opacity: 1;
}

.table-wrapper table tbody tr:nth-of-type(even) > * {
  background: var(--lightblue);
}

.table-wrapper.scrolling .sticky {
  min-width: 75px;
  color: var(--white);
  background: var(--darkblue);
}

.table-wrapper.scrolling table th.sticky span {
  opacity: 0;
}

.table-wrapper.scrolling table td.sticky > span:first-child {
  opacity: 1;
}

.table-wrapper.scrolling table td.sticky > span:last-child {
  opacity: 0;
}

.table-credits {
  font-size: 12px;
  margin-top: 10px;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

//FLAGS: https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css

const tableWrapper = document.querySelector(".table-wrapper");
const scrollingClass = "scrolling";

tableWrapper.addEventListener("scroll", function () {
  if (this.scrollLeft > 0) {
    this.classList.add(scrollingClass);
  } else {
    this.classList.remove(scrollingClass);
  }
});