<!-- Css -->
<link rel="stylesheet" href="vendors/dataTable/dataTables.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/dataTable/jquery.dataTables.min.js"></script>

<!-- Bootstrap 4 and responsive compatibility -->
<script src="vendors/dataTable/dataTables.bootstrap4.min.js"></script>
<script src="vendors/dataTable/dataTables.responsive.min.js"></script>

<table id="myTable" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>نام</th>
      <th>سمت</th>
      <th>دفتر</th>
      <th>سن</th>
      <th>تاریخ شروع</th>
      <th>حقوق</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>تینا محمدی</td>
      <td>معمار سیستم</td>
      <td>تهران</td>
      <td>61</td>
      <td>1395/04/25</td>
      <td>320,800</td>
    </tr>
    ...
  </tbody>
</table>

$(document).ready(function (){
    $('#myTable').DataTable();
});

<table id="myTable" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>تینا محمدی</td>
      <td>معمار سیستم</td>
      <td>تهران</td>
      <td>61</td>
      <td>1395/04/25</td>
      <td>$320,800</td>
    </tr>
    ...
  </tbody>
</table>

$(document).ready(function (){
    $('#myTable').DataTable({
        "scrollY": "400px",
        "scrollCollapse": true
    });
});