固定粘性位置

Question

我有这张桌子

.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>

但是

position:sticky

无法工作并滚动所有表格，我该如何解决这个问题？即使我尝试清除桌棒位置也不起作用

Answer 1

您需要将表格设置为相对位置。 （我还更改了高度并添加了一些用于滚动的 tds）

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>