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{&nbsp; &nbsp; padding: 0rem 1rem 0rem 1rem;&nbsp; &nbsp; overflow: scroll;&nbsp; &nbsp; table-layout: fixed;&nbsp; &nbsp; height:10rem;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; background-color:green;}.my_table {&nbsp; &nbsp; border-collapse: separate;&nbsp; &nbsp; border-spacing: 0;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin-bottom: 1rem;&nbsp; &nbsp; color: #212529;}.my_table thead th {&nbsp; &nbsp; &nbsp; border-top: 0px;&nbsp; &nbsp; position: -webkit-sticky;&nbsp; &nbsp; position: sticky;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; z-index: 4;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; color: #0062cc;&nbsp;&nbsp;&nbsp; &nbsp; }<div class='container'>&nbsp; <table class='my_table table'>&nbsp; &nbsp; <thead><tr><th><div>Header</div></th></tr></thead>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; &nbsp; <tbody><tr><td>Row</td></tr></tbody>&nbsp; </table></div>