Safari 替换粘性表格标题

Question

我有一个应用程序需要粘性标题。它可以在 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。

Answer 1

设置粘性仅适用.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>