Table

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

<div class="search-table-outter">
  <table>
    <tr>
      <th>Title</th>
    </tr>
  </table>
</div>

body {
  margin: 0;
  padding: 2rem;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
tr.purple th {
  background: purple;
  color: white;
}
th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

<table>
  <thead>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem.</td>
      <td>Ullam.</td>
      <td>Vel.</td>
      <td>At.</td>
      <td>Quis.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>Velit.</td>
      <td>Quisquam?</td>
      <td>Rerum?</td>
      <td>Iusto?</td>
    </tr>
    <tr>
      <td>Voluptates!</td>
      <td>Fugiat?</td>
      <td>Alias.</td>
      <td>Doloribus.</td>
      <td>Veritatis.</td>
    </tr>
    <tr class="green">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Qui!</td>
      <td>Accusamus?</td>
      <td>Minima?</td>
      <td>Dolorum.</td>
      <td>Molestiae.</td>
    </tr>
    <tr>
      <td>Vero!</td>
      <td>Voluptatum?</td>
      <td>Ea?</td>
      <td>Odit!</td>
      <td>A.</td>
    </tr>
    <tr class="purple">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Atque!</td>
      <td>Tenetur.</td>
      <td>Optio.</td>
      <td>Iure.</td>
      <td>Porro.</td>
    </tr>
    <tr>
      <td>Atque.</td>
      <td>Alias.</td>
      <td>Doloremque.</td>
      <td>Velit.</td>
      <td>Culpa.</td>
    </tr>
    <tr>
      <td>Placeat?</td>
      <td>Necessitatibus.</td>
      <td>Voluptate!</td>
      <td>Possimus.</td>
      <td>Nam?</td>
    </tr>
    <tr>
      <td>Illum!</td>
      <td>Quae.</td>
      <td>Expedita!</td>
      <td>Omnis.</td>
      <td>Nam.</td>
    </tr>
    <tr>
      <td>Consequuntur!</td>
      <td>Consectetur!</td>
      <td>Provident!</td>
      <td>Consequuntur!</td>
      <td>Distinctio.</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Voluptatem.</td>
      <td>Cupiditate!</td>
      <td>Quae.</td>
      <td>Praesentium.</td>
    </tr>
    <tr>
      <td>Possimus?</td>
      <td>Qui.</td>
      <td>Consequuntur.</td>
      <td>Deleniti.</td>
      <td>Voluptas.</td>
    </tr>
    <tr>
      <td>Hic?</td>
      <td>Ab.</td>
      <td>Asperiores?</td>
      <td>Omnis.</td>
      <td>Animi!</td>
    </tr>
    <tr>
      <td>Cupiditate.</td>
      <td>Velit.</td>
      <td>Libero.</td>
      <td>Iste.</td>
      <td>Dicta?</td>
    </tr>
    <tr>
      <td>Consequatur!</td>
      <td>Nobis.</td>
      <td>Aperiam!</td>
      <td>Odio.</td>
      <td>Nemo!</td>
    </tr>
    <tr>
      <td>Dolorem.</td>
      <td>Distinctio?</td>
      <td>Provident?</td>
      <td>Nisi!</td>
      <td>Impedit?</td>
    </tr>
    <tr>
      <td>Accusantium?</td>
      <td>Ea.</td>
      <td>Doloribus.</td>
      <td>Nobis.</td>
      <td>Maxime?</td>
    </tr>
    <tr>
      <td>Molestiae.</td>
      <td>Rem?</td>
      <td>Enim!</td>
      <td>Maxime?</td>
      <td>Reiciendis!</td>
    </tr>
  </tbody>
</table>