1 回答
TA贡献1841条经验 获得超3个赞
设置粘性仅适用.my_table thead th于 safari 和 chrome
.container{
padding: 0rem 1rem 0rem 1rem;
overflow: scroll;
table-layout: fixed;
height:10rem;
width: 100%;
background-color:green;
}
.my_table {
border-collapse: separate;
border-spacing: 0;
text-align: center;
width: 100%;
margin-bottom: 1rem;
color: #212529;
}
.my_table thead th {
border-top: 0px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 4;
background-color: #fff;
color: #0062cc;
}
<div class='container'>
<table class='my_table table'>
<thead><tr><th><div>Header</div></th></tr></thead>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
</table>
</div>
- 1 回答
- 0 关注
- 95 浏览
添加回答
举报