How to make the header of the table stick to the top?-CodePudding

enter code hereI'm making a half square at the top and half a column left and right. But now I'm stuck, the problem is that the table header won't stick to the top. Please help me Left and right columns can now be pinned to a table. But still having problem, I can't use the position sticky under the overflow scoll.

body {
  margin: 5%;
}
.con {
  overflow-x: scroll;
  display: block;
}
.table thead {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0;
}
.table tr th:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
}
.table tr th:last-child {
  position: sticky;
  right: 0;
  background-color: #fff;
}

.w-auto {
  width: 0 !important;
}
th,
td {
  white-space: nowrap !important;
}
.bg-white {
  background-color: #fff !important;
}

<div >
  <table >
    <!--       <div > -->
    <thead>
      <tr>
        <th scope="col" >#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="col">Handle</th>
        <th scope="col">Handle</th>
        <th scope="col" >...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" >1</th>
        <td>fsdffsdfsdsdf</td>
        <td>Ottsdfsdsfdo</td>
        <td>@msdfsdfsdfdfdo</td>
        <td>Ottasdasdwwqgjo</td>
        <td>@mdyty75656546o</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >3</th>
        <td>Jacrtytryrtyrtyob</td>
        <td>Thoertretretrnton</td>
        <td>Otertetertto</td>
        <td>@mdretertreto</td>
        <td>@twiertretretertter</td>
        <th >Delete</th>
      </tr>
    </tbody>
    <!--       </div> -->
  </table>
</div>

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quaerat corrupti dolor corporis praesentium, excepturi recusandae ex repudiandae eligendi officia iusto, porro eius quasi odit magni incidunt aliquam est deleniti.
  Non reiciendis culpa incidunt minima laborum nam perferendis porro rem minus quam reprehenderit deserunt, nisi saepe nostrum. In asperiores quisquam, possimus commodi atque, quod veniam hic iure iste natus officiis.
  Eum dolore atque temporibus! Ab quia commodi animi temporibus culpa voluptates id minima, nihil quisquam suscipit, nostrum accusantium eos? Id maiores iusto saepe doloremque nulla suscipit! Repellat veritatis quas explicabo?
  Numquam dolore quibusdam a dolorem, iusto ipsum modi tempore culpa quaerat nihil hic similique, minus repudiandae obcaecati totam architecto. Quidem beatae perferendis saepe odit explicabo rem natus, sed ea expedita?
  Possimus soluta itaque accusamus aut! Corrupti quod, ex officiis laborum molestias, aspernatur magni voluptate asperiores quis, delectus odio exercitationem nulla tempora vitae dolores sed dolorem reprehenderit eligendi expedita veritatis adipisci.
  Fuga voluptatibus quos voluptate, totam, deleniti dolore minima dicta illum eveniet temporibus placeat aspernatur repellendus omnis officiis? Ducimus tenetur, minus doloremque eligendi ea et vitae voluptate natus, aut, sint dolor!
  Ipsa, porro ab numquam beatae, labore maiores culpa atque voluptates dicta illum nihil. Rem, molestiae, aperiam, libero sit molestias dolor atque non doloremque consequatur explicabo error? Repudiandae dolore nihil perferendis?
  Hic quibusdam distinctio repudiandae molestiae, et a deleniti, quidem, similique soluta quas dolorem aliquam sequi. Quisquam atque autem voluptatem, fugiat nobis assumenda odio minima sit delectus nihil esse, neque possimus?
  Cupiditate numquam assumenda praesentium. Dolores ullam quo nihil, numquam quia optio soluta accusamus quas, assumenda, doloremque iusto. Nihil fugit eum nam nostrum officia. Tempore vero ut harum atque deserunt molestias!
  Molestiae rem ab sint odio culpa tempora sit enim nesciunt alias! Optio, enim nam voluptate obcaecati odio asperiores officiis! Facilis deleniti qui perferendis accusantium architecto dolores vel quaerat. Non, minima.
  Repellendus quisquam delectus totam voluptates corrupti laborum distinctio et illo! Blanditiis quidem perspiciatis beatae, doloribus aliquam molestiae dolorem sit totam veritatis velit natus. Explicabo repudiandae, vitae aut rem aliquid possimus?
  Autem delectus dolorum illum tenetur laborum a porro, praesentium rerum pariatur dolor nostrum velit fugit alias totam consequatur rem minus mollitia deleniti enim magnam recusandae architecto unde. Eligendi, eveniet perspiciatis!
  Optio quis et minus reiciendis amet ratione natus perferendis alias quibusdam asperiores deleniti facilis dolorum veritatis fugiat est fugit, maiores vitae ipsam aut excepturi! Possimus cumque exercitationem repellat vitae cupiditate.
  Reiciendis officia nisi sunt iste, voluptas asperiores deserunt. Assumenda voluptatem ex, facere nobis velit odio nesciunt, cupiditate praesentium eaque illo vero nemo. Voluptatum cupiditate adipisci sequi tempore dignissimos, magnam et.
  Recusandae laudantium, voluptatem eveniet obcaecati quasi possimus perspiciatis neque provident sequi porro iste laboriosam id necessitatibus eius labore, maxime nam esse quas voluptatum. Laboriosam porro facilis deserunt, itaque consectetur tempora!
  Dignissimos vel facilis error perspiciatis repudiandae recusandae facere officiis? Sapiente reiciendis cumque tempora sint nemo cupiditate praesentium, exercitationem nam, natus ipsa velit, expedita necessitatibus aliquid! Beatae eveniet nesciunt tempore earum.
  Maiores illum dicta at aut quaerat reiciendis, aperiam nihil impedit fugiat est iste? Tempore, veniam, debitis quas officiis quis ea non dolorum sint delectus sapiente tenetur, porro ex ipsam voluptatum!
  Delectus, rem dicta, nobis nam minus facilis, unde itaque laborum consequuntur magnam sapiente dolore. Odio a voluptas tempore, eveniet, quisquam consectetur voluptatibus ullam doloribus facere corporis eligendi mollitia incidunt illum!
  A quos praesentium quidem veritatis repellat animi unde quod assumenda incidunt vel repudiandae, vero, laudantium dolorem ut pariatur inventore nihil et reprehenderit totam deserunt sunt! Animi in optio culpa quis.
  Exercitationem commodi excepturi corrupti totam, reprehenderit nisi dolores blanditiis hic fuga aut suscipit maxime adipisci ut dolor placeat incidunt obcaecati quae magnam. Magni voluptatum tenetur, reprehenderit suscipit expedita ullam voluptate!
  Eligendi necessitatibus corporis voluptatum tempora. Aspernatur ea numquam ad libero officiis animi dicta quas illum dolore cum illo, nisi harum esse cumque quam non ratione vitae, voluptatem id inventore suscipit!
  Vitae, laudantium consectetur deleniti dolor quaerat earum dolorum! Nisi nihil rerum ipsa fugiat odit expedita ipsam tempora eveniet inventore repellat labore consequatur, ea id suscipit necessitatibus nam dignissimos quas itaque.
  Reiciendis ducimus corrupti odit excepturi, inventore, rem soluta voluptatem veniam fuga quia numquam nulla doloribus quidem illo. Neque nobis tempora harum veniam eos? Nostrum recusandae, optio harum beatae id illum.
  Tempore voluptas animi, doloribus minus ad autem voluptatem culpa magni voluptates natus eligendi optio magnam aspernatur nobis fugit accusantium facere itaque ratione repellendus beatae odio! Consequuntur laborum error voluptatum a.
  Veniam iure laborum voluptatem. Ratione iure labore quasi autem vel modi porro aut, nemo, illo eum nesciunt! Tempore necessitatibus voluptatum suscipit impedit! Nobis, reiciendis saepe. Iure repudiandae nobis consequatur. Minima?
  Placeat, quaerat veniam quia corporis vel voluptas officia delectus ut sequi debitis qui quas eos laudantium possimus atque libero dolorem ab quis aspernatur quam tenetur maxime a earum reprehenderit. Labore?
  Deserunt autem qui, veniam non error aliquid sit quae facere ut accusamus placeat delectus optio consequatur temporibus tenetur recusandae magni dignissimos exercitationem, enim libero consectetur natus. Quam temporibus corrupti eaque.
  Assumenda qui inventore beatae. Asperiores iste cupiditate optio adipisci inventore harum alias est, provident minima, nam perferendis aut dolorem iure quas, corrupti expedita cumque voluptatem! Reiciendis alias labore dolor enim.
</div>

CodePudding user response：

do you want look like this ??

link

click on demo button

CodePudding user response：

To make the header actually stick to the top then you have to make the parent container overflow first, in your example, you probably wanted it to overflow vertically instead of horizontally. See the additional code I've added to your code:

body {
  margin: 5%;
}

.con {
  overflow: auto;
  display: block;
  height: 200px;
}

.table {
  position: relative;
}


/* .table thead {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0;
} */

thead {
  position: fixed;
  top: 25px;
}

thead>tr>th {
  padding: 0 2rem;
}

thead>tr>th:first-child {
  padding: 0;
}

tbody {
  margin-top: 50px;
}

tbody tr th:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
}

tbody tr th:last-child {
  position: sticky;
  right: 0;
  background-color: #fff;
}

.w-auto {
  width: 0 !important;
}

th,
td {
  white-space: nowrap !important;
}

.bg-white {
  background-color: #fff !important;
}

<div >
  <table >
    <!--       <div > -->
    <thead>
      <tr>
        <th scope="col" >#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="col">Handle</th>
        <th scope="col">Handle</th>
        <th scope="col" >...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
      <tr>
        <th scope="row" >2</th>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <td>Jacobasdsadsadsad</td>
        <td>Thornsadsadsdton</td>
        <td>Ottsadsadsado</td>
        <td>@mghjghytudo</td>
        <td>@fsdsadsadsaat</td>
        <th >Delete</th>
      </tr>
    </tbody>
    <!--       </div> -->
  </table>
</div>

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quaerat corrupti dolor corporis praesentium, excepturi recusandae ex repudiandae eligendi officia iusto, porro eius quasi odit magni incidunt aliquam est deleniti. Non reiciendis culpa
  incidunt minima laborum nam perferendis porro rem minus quam reprehenderit deserunt, nisi saepe nostrum. In asperiores quisquam, possimus commodi atque, quod veniam hic iure iste natus officiis. Eum dolore atque temporibus! Ab quia commodi animi temporibus
  culpa voluptates id minima, nihil quisquam suscipit, nostrum accusantium eos? Id maiores iusto saepe doloremque nulla suscipit! Repellat veritatis quas explicabo? Numquam dolore quibusdam a dolorem, iusto ipsum modi tempore culpa quaerat nihil hic similique,
  minus repudiandae obcaecati totam architecto. Quidem beatae perferendis saepe odit explicabo rem natus, sed ea expedita? Possimus soluta itaque accusamus aut! Corrupti quod, ex officiis laborum molestias, aspernatur magni voluptate asperiores quis,
  delectus odio exercitationem nulla tempora vitae dolores sed dolorem reprehenderit eligendi expedita veritatis adipisci. Fuga voluptatibus quos voluptate, totam, deleniti dolore minima dicta illum eveniet temporibus placeat aspernatur repellendus omnis
  officiis? Ducimus tenetur, minus doloremque eligendi ea et vitae voluptate natus, aut, sint dolor! Ipsa, porro ab numquam beatae, labore maiores culpa atque voluptates dicta illum nihil. Rem, molestiae, aperiam, libero sit molestias dolor atque non
  doloremque consequatur explicabo error? Repudiandae dolore nihil perferendis? Hic quibusdam distinctio repudiandae molestiae, et a deleniti, quidem, similique soluta quas dolorem aliquam sequi. Quisquam atque autem voluptatem, fugiat nobis assumenda
  odio minima sit delectus nihil esse, neque possimus? Cupiditate numquam assumenda praesentium. Dolores ullam quo nihil, numquam quia optio soluta accusamus quas, assumenda, doloremque iusto. Nihil fugit eum nam nostrum officia. Tempore vero ut harum
  atque deserunt molestias! Molestiae rem ab sint odio culpa tempora sit enim nesciunt alias! Optio, enim nam voluptate obcaecati odio asperiores officiis! Facilis deleniti qui perferendis accusantium architecto dolores vel quaerat. Non, minima. Repellendus
  quisquam delectus totam voluptates corrupti laborum distinctio et illo! Blanditiis quidem perspiciatis beatae, doloribus aliquam molestiae dolorem sit totam veritatis velit natus. Explicabo repudiandae, vitae aut rem aliquid possimus? Autem delectus
  dolorum illum tenetur laborum a porro, praesentium rerum pariatur dolor nostrum velit fugit alias totam consequatur rem minus mollitia deleniti enim magnam recusandae architecto unde. Eligendi, eveniet perspiciatis! Optio quis et minus reiciendis amet
  ratione natus perferendis alias quibusdam asperiores deleniti facilis dolorum veritatis fugiat est fugit, maiores vitae ipsam aut excepturi! Possimus cumque exercitationem repellat vitae cupiditate. Reiciendis officia nisi sunt iste, voluptas asperiores
  deserunt. Assumenda voluptatem ex, facere nobis velit odio nesciunt, cupiditate praesentium eaque illo vero nemo. Voluptatum cupiditate adipisci sequi tempore dignissimos, magnam et. Recusandae laudantium, voluptatem eveniet obcaecati quasi possimus
  perspiciatis neque provident sequi porro iste laboriosam id necessitatibus eius labore, maxime nam esse quas voluptatum. Laboriosam porro facilis deserunt, itaque consectetur tempora! Dignissimos vel facilis error perspiciatis repudiandae recusandae
  facere officiis? Sapiente reiciendis cumque tempora sint nemo cupiditate praesentium, exercitationem nam, natus ipsa velit, expedita necessitatibus aliquid! Beatae eveniet nesciunt tempore earum. Maiores illum dicta at aut quaerat reiciendis, aperiam
  nihil impedit fugiat est iste? Tempore, veniam, debitis quas officiis quis ea non dolorum sint delectus sapiente tenetur, porro ex ipsam voluptatum! Delectus, rem dicta, nobis nam minus facilis, unde itaque laborum consequuntur magnam sapiente dolore.
  Odio a voluptas tempore, eveniet, quisquam consectetur voluptatibus ullam doloribus facere corporis eligendi mollitia incidunt illum! A quos praesentium quidem veritatis repellat animi unde quod assumenda incidunt vel repudiandae, vero, laudantium dolorem
  ut pariatur inventore nihil et reprehenderit totam deserunt sunt! Animi in optio culpa quis. Exercitationem commodi excepturi corrupti totam, reprehenderit nisi dolores blanditiis hic fuga aut suscipit maxime adipisci ut dolor placeat incidunt obcaecati
  quae magnam. Magni voluptatum tenetur, reprehenderit suscipit expedita ullam voluptate! Eligendi necessitatibus corporis voluptatum tempora. Aspernatur ea numquam ad libero officiis animi dicta quas illum dolore cum illo, nisi harum esse cumque quam
  non ratione vitae, voluptatem id inventore suscipit! Vitae, laudantium consectetur deleniti dolor quaerat earum dolorum! Nisi nihil rerum ipsa fugiat odit expedita ipsam tempora eveniet inventore repellat labore consequatur, ea id suscipit necessitatibus
  nam dignissimos quas itaque. Reiciendis ducimus corrupti odit excepturi, inventore, rem soluta voluptatem veniam fuga quia numquam nulla doloribus quidem illo. Neque nobis tempora harum veniam eos? Nostrum recusandae, optio harum beatae id illum. Tempore
  voluptas animi, doloribus minus ad autem voluptatem culpa magni voluptates natus eligendi optio magnam aspernatur nobis fugit accusantium facere itaque ratione repellendus beatae odio! Consequuntur laborum error voluptatum a. Veniam iure laborum voluptatem.
  Ratione iure labore quasi autem vel modi porro aut, nemo, illo eum nesciunt! Tempore necessitatibus voluptatum suscipit impedit! Nobis, reiciendis saepe. Iure repudiandae nobis consequatur. Minima? Placeat, quaerat veniam quia corporis vel voluptas
  officia delectus ut sequi debitis qui quas eos laudantium possimus atque libero dolorem ab quis aspernatur quam tenetur maxime a earum reprehenderit. Labore? Deserunt autem qui, veniam non error aliquid sit quae facere ut accusamus placeat delectus
  optio consequatur temporibus tenetur recusandae magni dignissimos exercitationem, enim libero consectetur natus. Quam temporibus corrupti eaque. Assumenda qui inventore beatae. Asperiores iste cupiditate optio adipisci inventore harum alias est, provident
  minima, nam perferendis aut dolorem iure quas, corrupti expedita cumque voluptatem! Reiciendis alias labore dolor enim.
</div>