为了账号安全,请及时绑定邮箱和手机立即绑定

Safari 替换粘性表格标题

Safari 替换粘性表格标题

富国沪深 2024-01-03 14:05:51
我有一个应用程序需要粘性标题。它可以在 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。
查看完整描述

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>


查看完整回答
反对 回复 2024-01-03
  • 1 回答
  • 0 关注
  • 95 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信