我有一个需要粘性标题的应用程序。它可以在Chrome和其他浏览器上正常工作,但Safari则不能,尽管文档指出应该如此。
这是代码:(您应该在Safari上运行它才能不起作用)
.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,
.my_table thead th,
.my_table thead td {
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>
</table>
</div>
我该如何解决?如果父级overflow
是auto
,而我的是scroll
,则我读到有关该问题的信息。
仅对.my_table thead th
设置粘性以用于野生动物园和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>