sticky header with HTML table

Question

I am trying to develop fix header html table. I use basic HTML and CSS for do it. But its not working. for do this, I search in google. I used below sample for do this. i applied correctly. but not working well resource

 
body{height:100px; overflow:scroll}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  height:300px;
}
th{position: sticky !important}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  height:100px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</body>
</html>

when page scroll, i need to fix my table headers. how i do it? please check my sample

Does this answer your question? HTML table with fixed headers? — vmank
– vmank, Commented Oct 8, 2020 at 10:52
Your reference as well as your title suggest that you are looking for fixed table headers on scroll. If you take a look at the SO post in my first comment it's exactly what you're asking for. — vmank
– vmank, Commented Oct 8, 2020 at 10:57
Does this answer your question? Table header to stay fixed at the top when user scrolls it out of view with jQuery — Awais
– Awais, Commented Oct 8, 2020 at 11:50

Chaiya Tantisukarom · Accepted Answer · 2020-10-08 11:56:05Z

4

You don't apply it correctly.

top: 0;

is the key to stick the, position:sticky, on top.

th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

answered Oct 8, 2020 at 11:56

Chaiya Tantisukarom

511 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lisa · Accepted Answer · 2023-03-17 11:41:38Z

0

thead {
    background-color: #f5f5f5;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
}

Feel free to change the background colour it an example. This way it looks as though the entire heading row is moving as you scroll.

answered Mar 17, 2023 at 11:41

Lisa

2831 silver badge23 bronze badges

Collectives™ on Stack Overflow

sticky header with HTML table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related