<div class="container">
  <div class="search">
    <input type="text" id="myInput" placeholder="Поиск">
  </div>
  <table id="myTable">
    <thead>
      <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Mail</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ivan</td>
        <td>20</td>
        <td><a href="mailto:ivan@mail.com">ivan@mail.com</a></td>
      </tr>
      <tr>
        <td>Olga</td>
        <td>18</td>
        <td><a href="mailto:olya@mail.com">olya@mail.com</a></td>
      </tr>
      <tr>
        <td>Stev</td>
        <td>22</td>
        <td><a href="mailto:stepa@mail.com">stepa@mail.com</a></td>
      </tr>
      <tr>
        <td>Jeanne</td>
        <td>32</td>
        <td><a href="mailto:janna@mail.com">janna@mail.com</a></td>
      </tr>
      <tr>
        <td>Ekaterina</td>
        <td>27</td>
        <td><a href="mailto:katy@mail.com">katy@mail.com</a></td>
      </tr>
      <tr>
        <td>Дарья</td>
        <td>31</td>
        <td><a href="mailto:dasha@mail.com">dasha@mail.com</a></td>
      </tr>
    </tbody>
  </table>
</div>
html {
  width: 100%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20px/28px 'Verdana'
}

.container {
  width: 80%;
  
  .search {
    width: 100%;
    margin-bottom: 12px;
    
    input {
      font: 16px/16px 'Verdana';
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 12px 20px;
      outline: none;
      
      &:focus {
        border-color: #4b99f2;
      }
    }
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #eee;

    thead {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      background: #333;
    }

    tbody {

      tr {

        &:nth-of-type(even) {
          background: #eee;
        }
      }
    }

    td {
      padding: 4px 12px;

      a {
        color: #4b99f2;
        text-decoration: none;
      }
    }
  }
}
View Compiled
$("#myInput").on("keyup", function() {
  var  value = $(this).val().toLowerCase();
  $("#myTable tbody tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js