Sticky headers - Demo 3

Using CSS position: sticky

by pjbelo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales</title>
</head>
<body>
    
    <h1>ACME Company</h1>
    <table>
        <tr>
          <th class="sticky-top-left">Sales by Country</th>
          <th class="sticky-top">January</th>
          <th class="sticky-top">February</th>
          <th class="sticky-top">March</th>
          <th class="sticky-top">April</th>
          <th class="sticky-top">May</th>
          <th class="sticky-top">June</th>
          <th class="sticky-top">July</th>
          <th class="sticky-top">August</th>
          <th class="sticky-top">September</th>
          <th class="sticky-top">October</th>
          <th class="sticky-top">November</th>
          <th class="sticky-top">December</th>
        </tr>
        <tr>
          <td class="sticky-left">Portugal</td>
          <td>50.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
          <td>52.000</td>
        </tr>
        <tr>
            <td class="sticky-left">Spain</td>
            <td>50.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
          </tr>
          <tr>
            <td class="sticky-left">France</td>
            <td>50.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
            <td>52.000</td>
           ...

CSS

.sticky-top {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 1;
  /* set some style */
  background-color: teal;
  color: white;
}

.sticky-left {
  position: sticky;
  position: -webkit-sticky;
  left: 0px;
  z-index: 1;
  /* set some style */
  background-color: chocolate;
  color: white;
}

.sticky-top-left {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  left: 0px;
  z-index: 2;
  /* set some style */
  background-color: peru;
  color: white;
}

/* set some spacing */
td, 
th {
  padding: 20px;
}