<main>
  <div class="table-wrapper" tabindex="0">
    <table>
    <thead>
      <tr>
        <th>Drink</th>
        <th>Emoji</th>
        <th>Calories</th>
        <th>Carbohydrates (g)</th>
        <th>Total Sugar (g)</th>
        <th>Protein (g)</th>
        <th>Total Fat (g)</th>
        <th>Total Fiber (g)</th>
        <th>Cholesterol (mg)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text">milk</td>
        <td class="text">🥛</td>
        <td class="numeric">149.0</td>
        <td class="numeric">11.7</td>
        <td class="numeric">12.3</td>
        <td class="numeric">7.7</td>
        <td class="numeric">8.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">24.4</td>
      </tr>
      <tr>
        <td class="text">coffee</td>
        <td class="text">☕️</td>
        <td class="numeric">2.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.3</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">green tea</td>
        <td class="text">🍵</td>
        <td class="numeric">2.5</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.5</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">sake</td>
        <td class="text">🍶</td>
        <td class="numeric">39.0</td>
        <td class="numeric">1.5</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.1</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">champagne</td>
        <td class="text">🍾</td>
        <td class="numeric">89.0</td>
        <td class="numeric">1.6</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.4</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">red wine</td>
        <td class="text">🍷</td>
        <td class="numeric">125.0</td>
        <td class="numeric">3.8</td>
        <td class="numeric">0.9</td>
        <td class="numeric">0.1</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">martini</td>
        <td class="text">🍸</td>
        <td class="numeric">210.0</td>
        <td class="numeric">1.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">tropical drink</td>
        <td class="text">🍹</td>
        <td class="numeric">245.0</td>
        <td class="numeric">32.0</td>
        <td class="numeric">31.5</td>
        <td class="numeric">0.6</td>
        <td class="numeric">2.7</td>
        <td class="numeric">0.4</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">beer</td>
        <td class="text">🍺</td>
        <td class="numeric">153.0</td>
        <td class="numeric">12.6</td>
        <td class="numeric">0.0</td>
        <td class="numeric">1.6</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">whiskey</td>
        <td class="text">🥃</td>
        <td class="numeric">70.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
      <tr>
        <td class="text">soft drink</td>
        <td class="text">🥤</td>
        <td class="numeric">151.0</td>
        <td class="numeric">38.9</td>
        <td class="numeric">38.9</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
        <td class="numeric">0.0</td>
      </tr>
    </tbody>
  </table>
  </div>
 
  <p>Data from <a href="https://www.eatthismuch.com/">eat this much</a> food browser</p>
</main>
main {
  padding: 1em;
}

tr {
  border-bottom: 1px solid;
}

th {
  background-color: #555;
  color: #fff;
  white-space: nowrap;
}

th,
td {
  text-align: left;
  padding: 0.5em 1em;
  white-space: nowrap;
}

@media screen and (max-width: 1140px) {
  table {
    display: flex;
  }

  tbody {
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;

    max-width: 100%;
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.4), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
  }

  th,
  td {
    display: block;
  }

  .numeric {
    text-align: right;
  }

  .text {
    text-align: center;
  }
}

p {
  text-align: right;
  margin-top: 1em;
  font-style: italic;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.