Edit in JSFiddle

:root {
  --theme-light: #C5CAE9;
  --theme-white: #FFFFFF;
}

table.mat-table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}

table.mat-table td,
table.mat-table th {
  padding: 15px 10px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px;
}

table.mat-table tr:nth-child(even) {
  background-color: var(--theme-white);
}

table.mat-table tr:nth-child(odd) {
  background-color: var(--theme-light);
}

table.mat-table thead tr th {
  position: sticky;
  top: 0;
  text-align: center;
  background-color: var(--theme-white);
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta suscipit imperdiet. Aliquam vitae luctus tellus, et tincidunt lacus. Nunc laoreet tristique auctor. Pellentesque pulvinar laoreet mi vel luctus. Donec ut vehicula mi, eget varius ligula.
  Aenean feugiat consequat libero ac congue. Donec vulputate augue et mauris volutpat hendrerit. Duis at odio ante. Nam mattis, felis vel tristique congue, enim mi pharetra nunc, non commodo magna est in ligula. Morbi hendrerit, lectus eget bibendum dapibus,
  elit augue faucibus diam, non pretium risus orci et ante. Nam at ultrices risus. Curabitur auctor arcu sem. In porttitor enim ut leo varius feugiat. Donec consectetur mi sit amet odio elementum, et sollicitudin neque volutpat. Quisque dignissim consequat
  dui a bibendum. Nunc diam lacus, convallis eget commodo et, suscipit lobortis mauris.
</p>
<table class="mat-table">
  <thead class="sticky">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
    <tr>
      <td>Interest data</td>
      <td>Wow stats</td>
      <td>Much good</td>
      <td>Wowser</td>
    </tr>
  </tbody>
</table>
<p>
  Praesent sollicitudin, velit ac volutpat hendrerit, lectus nunc dapibus leo, a faucibus tellus mauris eget massa. Etiam tristique leo nec vestibulum sollicitudin. Vivamus in lectus eget enim lacinia malesuada. Vestibulum ac urna orci. Maecenas pulvinar
  ut neque non maximus. Donec efficitur placerat leo eu euismod. Sed sed tortor venenatis, molestie nibh non, ultrices purus. In maximus sed augue at ullamcorper.
</p>