<table>
  <thead>
    <tr class="blue">
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>张三</td>
      <td>20</td>
      <td>陕西西安</td>
    </tr>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>20</td>
      <td>陕西延安</td>
    </tr>
    <tr>
      <td>2</td>
      <td>王五</td>
      <td>28</td>
      <td>陕西渭南</td>
    </tr>
    <tr>
      <td>3</td>
      <td>某人</td>
      <td>22</td>
      <td>陕西渭南</td>
    </tr>
    <tr>
      <td>4</td>
      <td>某人</td>
      <td>23</td>
      <td>陕西渭南</td>
    </tr>
    <tr>
      <td>5</td>
      <td>某人</td>
      <td>23</td>
      <td>陕西渭南</td>
    </tr>
    <tr>
      <td>6</td>
      <td>某人</td>
      <td>23</td>
      <td>陕西渭南</td>
    </tr>
    <tr>
      <td>7</td>
      <td>某人</td>
      <td>23</td>
      <td>陕西渭南</td>
    </tr>
  </tbody>
</table>
body {
  margin: 0;
  padding: 1em;
}

table {
  width: 100%;
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 15px;
}
tr.blue th{color:white;}
tr.red th {color:yellow;}
tr.blue th,
tr.red th{
  position: sticky;
  top:0;
  background-color:blue;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}
thead tr{
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.