sticky table rows

by David

HTML

<table>
<thead>
  <tr>
    <th class='sticky-th'>Name</th>
    <th class='sticky-th'>Favorite Color</th>
  </tr>
</thead>
<tbody>
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td  class='sticky-td'>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr>  
 <tr><td>Bob</td><td>Yellow</td></tr>
 <tr><td>Michelle</td> <td>Purple</td></tr> ...

CSS

.sticky-th  { background-color: red; position: -webkit-sticky; position: sticky; top: 1px; z-index: 2000;}
.sticky-td  { background-color: yellow; position: -webkit-sticky; position: sticky; top: 20px; z-index: 2000;}