<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
</head
>
<style
>
body
{
margin: 0
;
padding: 1em
;
}
table
{
width: 100%
;
text-align: left
;
position: relative
;
border-collapse: collapse
;
}
th, td
{
padding: 15px
;
}
tr.red th
{color:white
;}
tr.red th
{
position: sticky
;
top:0
;
background-color:red
;
}
thead tr
{
color:white
;
}
</style
>
<body
>
<table
>
<thead
>
<tr class
="red">
<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
>
</html
>
效果图：
