Fix sticky position

Question

I have this table

.table_wrapper {
    width: 100%;
    height: 400px;
    overflow: auto;
    position: relative;
}

.table_wrapper thead th {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    top: 0;
}

<div class="table_wrapper">
            <table >
                <thead>
                    <tr>
                        <th>Patient Name</th>
                        <th>Contact Number</th>
                        <th>Date/Time</th>
                        <th>Status</th>
                        <th>Duration</th>
                        <th>Room/Location</th>
                        <th>Appointment Type/Reason</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

but position:sticky not working and scroll with all table, how i can fix that? even when i try clear table stick position also don`t work

Answer 1

You need to set table as position relative. (I also changed the height and added some some tds for scroll)

table{
  width: 100%;
  height: 1400px;
  overflow: auto;
  position: relative;
}

.table_wrapper thead th {
  /*position: -webkit-sticky;*/
  position: sticky;
  z-index: 2;
  top: 0;
}

<div class="table_wrapper">
  <table >
      <thead>
          <tr>
              <th>Patient Name</th>
              <th>Contact Number</th>
              <th>Date/Time</th>
              <th>Status</th>
              <th>Duration</th>
              <th>Room/Location</th>
              <th>Appointment Type/Reason</th>
              <th>Notes</th>
          </tr>
      </thead>
      <tr>
        <td>Patient Name</td>
        <td>Contact Number</td>
        <td>Date/Time</td>
        <td>Status</td>
        <td>Duration</td>
        <td>Room/Location</td>
        <td>Appointment Type/Reason</td>
        <td>Notes</td>
    </tr>
    <tr>
      <td>Patient Name</td>
      <td>Contact Number</td>
      <td>Date/Time</td>
      <td>Status</td>
      <td>Duration</td>
      <td>Room/Location</td>
      <td>Appointment Type/Reason</td>
      <td>Notes</th>
  </tr>
  <tr>
    <td>Patient Name</td>
    <td>Contact Number</td>
    <td>Date/Time</td>
    <td>Status</td>
    <td>Duration</td>
    <td>Room/Location</td>
    <td>Appointment Type/Reason</td>
    <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
<tr>
  <td>Patient Name</td>
  <td>Contact Number</td>
  <td>Date/Time</td>
  <td>Status</td>
  <td>Duration</td>
  <td>Room/Location</td>
  <td>Appointment Type/Reason</td>
  <td>Notes</th>
</tr>
      <tbody>
      </tbody>
  </table>

</div>