首页 > 其他分享 >position sticky table 中不生效问题

position sticky table 中不生效问题

时间：2023-11-02 16:15:20浏览次数：40  
标签：Incidunt Accusantium sticky Tenetur Enim position table

1. 确认浏览器版本支持

 

const cssSupport = (attr: any, value: string) => {
    const element = document.createElement('div')
    if (attr in element.style) {
        element.style[attr] = value
        return element.style[attr] === value
    } else {
        return false
    }
}
cssSupport ('position', 'sticky')

 

2. 确认父亲元素以及自身没有用overflow:hidden 

    https://css-tricks.com/position-sticky-and-table-headers/

3. table 中如果要 thead 用 position：sticky   ，这个style 要加到 th上，而不是thead  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    body {
  margin: 0;
  padding: 2rem;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
tr.purple th {
  background: purple;
  color: white;
}
th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
  </style>

  <table>
  <thead>
    <tr class="red">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem.</td>
      <td>Ullam.</td>
      <td>Vel.</td>
      <td>At.</td>
      <td>Quis.</td>
    </tr>
    <tr>
      <td>Quas!</td>
      <td>Velit.</td>
      <td>Quisquam?</td>
      <td>Rerum?</td>
      <td>Iusto?</td>
    </tr>
    <tr>
      <td>Voluptates!</td>
      <td>Fugiat?</td>
      <td>Alias.</td>
      <td>Doloribus.</td>
      <td>Veritatis.</td>
    </tr>
    <tr>
      <td>Maiores.</td>
      <td>Ab.</td>
      <td>Accusantium.</td>
      <td>Ullam!</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Id!</td>
      <td>Officiis.</td>
      <td>Modi!</td>
      <td>Obcaecati.</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Ad!</td>
      <td>Impedit.</td>
      <td>Alias!</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Expedita.</td>
      <td>Quo.</td>
      <td>Exercitationem!</td>
      <td>Optio?</td>
      <td>Ipsum?</td>
    </tr>
    <tr>
      <td>Commodi!</td>
      <td>Rem.</td>
      <td>Aspernatur.</td>
      <td>Accusantium!</td>
      <td>Maiores.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Cumque?</td>
      <td>Eveniet!</td>
      <td>Mollitia?</td>
      <td>Vero.</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>Inventore.</td>
      <td>Quasi!</td>
      <td>Ducimus.</td>
      <td>Repudiandae!</td>
    </tr>
    <tr>
      <td>Dolores!</td>
      <td>Necessitatibus.</td>
      <td>Corrupti!</td>
      <td>Eum.</td>
      <td>Sunt!</td>
    </tr>
    <tr>
      <td>Ea.</td>
      <td>Culpa?</td>
      <td>Quam?</td>
      <td>Nemo!</td>
      <td>Sit!</td>
    </tr>
    <tr>
      <td>Veritatis!</td>
      <td>Facilis.</td>
      <td>Expedita?</td>
      <td>Ipsam!</td>
      <td>Omnis!</td>
    </tr>
    <tr>
      <td>Vitae.</td>
      <td>Cumque.</td>
      <td>Repudiandae.</td>
      <td>Ut?</td>
      <td>Sed!</td>
    </tr>
    <tr>
      <td>Accusantium.</td>
      <td>Adipisci.</td>
      <td>Sit.</td>
      <td>Maxime.</td>
      <td>Harum.</td>
    </tr>
    <tr class="green">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Qui!</td>
      <td>Accusamus?</td>
      <td>Minima?</td>
      <td>Dolorum.</td>
      <td>Molestiae.</td>
    </tr>
    <tr>
      <td>Vero!</td>
      <td>Voluptatum?</td>
      <td>Ea?</td>
      <td>Odit!</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Debitis.</td>
      <td>Veniam.</td>
      <td>Fuga.</td>
      <td>Alias!</td>
      <td>Recusandae!</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Dolorum.</td>
      <td>Enim.</td>
      <td>Sapiente!</td>
      <td>Suscipit?</td>
    </tr>
    <tr>
      <td>Consequuntur.</td>
      <td>Doloremque.</td>
      <td>Illum!</td>
      <td>Iste!</td>
      <td>Sint!</td>
    </tr>
    <tr>
      <td>Facilis.</td>
      <td>Error.</td>
      <td>Fugiat.</td>
      <td>At.</td>
      <td>Modi?</td>
    </tr>
    <tr>
      <td>Voluptatibus!</td>
      <td>Alias.</td>
      <td>Eaque.</td>
      <td>Cum.</td>
      <td>Ducimus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Enim.</td>
      <td>Earum?</td>
      <td>Nobis?</td>
      <td>Eveniet.</td>
    </tr>
    <tr>
      <td>Eum!</td>
      <td>Id?</td>
      <td>Molestiae.</td>
      <td>Velit.</td>
      <td>Minima.</td>
    </tr>
    <tr>
      <td>Sapiente?</td>
      <td>Neque.</td>
      <td>Obcaecati!</td>
      <td>Earum.</td>
      <td>Esse.</td>
    </tr>
    <tr>
      <td>Nam?</td>
      <td>Ipsam!</td>
      <td>Provident.</td>
      <td>Ullam.</td>
      <td>Quae?</td>
    </tr>
    <tr>
      <td>Amet!</td>
      <td>In.</td>
      <td>Officia!</td>
      <td>Natus?</td>
      <td>Tempore?</td>
    </tr>
    <tr>
      <td>Consequatur.</td>
      <td>Hic.</td>
      <td>Officia.</td>
      <td>Itaque?</td>
      <td>Quasi.</td>
    </tr>
    <tr>
      <td>Enim.</td>
      <td>Tenetur.</td>
      <td>Asperiores?</td>
      <td>Eos!</td>
      <td>Libero.</td>
    </tr>
    <tr>
      <td>Exercitationem.</td>
      <td>Quidem!</td>
      <td>Beatae?</td>
      <td>Adipisci?</td>
      <td>Accusamus.</td>
    </tr>
    <tr>
      <td>Omnis.</td>
      <td>Accusamus?</td>
      <td>Eius!</td>
      <td>Recusandae!</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Magni.</td>
      <td>Temporibus!</td>
      <td>Odio!</td>
      <td>Odit!</td>
      <td>Voluptatum?</td>
    </tr>
    <tr>
      <td>Eum.</td>
      <td>Animi!</td>
      <td>Labore.</td>
      <td>Alias!</td>
      <td>Fuga.</td>
    </tr>
    <tr>
      <td>Quia!</td>
      <td>Quis.</td>
      <td>Neque?</td>
      <td>Illo.</td>
      <td>Ad.</td>
    </tr>
    <tr>
      <td>Officiis.</td>
      <td>Exercitationem!</td>
      <td>Adipisci?</td>
      <td>Officiis?</td>
      <td>In?</td>
    </tr>
    <tr>
      <td>Voluptates?</td>
      <td>Voluptatum.</td>
      <td>Nihil.</td>
      <td>Totam?</td>
      <td>Quisquam!</td>
    </tr>
    <tr>
      <td>Soluta.</td>
      <td>Tempore!</td>
      <td>Cupiditate.</td>
      <td>Beatae.</td>
      <td>Perspiciatis.</td>
    </tr>
    <tr>
      <td>Porro.</td>
      <td>Officia?</td>
      <td>Error.</td>
      <td>Culpa?</td>
      <td>Fugit.</td>
    </tr>
    <tr>
      <td>Et?</td>
      <td>Nemo.</td>
      <td>Nisi?</td>
      <td>Totam!</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Saepe?</td>
      <td>Vero.</td>
      <td>Amet?</td>
      <td>Illo!</td>
      <td>Laborum!</td>
    </tr>
    <tr class="purple">
      <th>Name</th>
      <th>Age</th>
      <th>Job</th>
      <th>Color</th>
      <th>URL</th>
    </tr>
    <tr>
      <td>Atque!</td>
      <td>Tenetur.</td>
      <td>Optio.</td>
      <td>Iure.</td>
      <td>Porro.</td>
    </tr>
    <tr>
      <td>Atque.</td>
      <td>Alias.</td>
      <td>Doloremque.</td>
      <td>Velit.</td>
      <td>Culpa.</td>
    </tr>
    <tr>
      <td>Placeat?</td>
      <td>Necessitatibus.</td>
      <td>Voluptate!</td>
      <td>Possimus.</td>
      <td>Nam?</td>
    </tr>
    <tr>
      <td>Illum!</td>
      <td>Quae.</td>
      <td>Expedita!</td>
      <td>Omnis.</td>
      <td>Nam.</td>
    </tr>
    <tr>
      <td>Consequuntur!</td>
      <td>Consectetur!</td>
      <td>Provident!</td>
      <td>Consequuntur!</td>
      <td>Distinctio.</td>
    </tr>
    <tr>
      <td>Aperiam!</td>
      <td>Voluptatem.</td>
      <td>Cupiditate!</td>
      <td>Quae.</td>
      <td>Praesentium.</td>
    </tr>
    <tr>
      <td>Possimus?</td>
      <td>Qui.</td>
      <td>Consequuntur.</td>
      <td>Deleniti.</td>
      <td>Voluptas.</td>
    </tr>
    <tr>
      <td>Hic?</td>
      <td>Ab.</td>
      <td>Asperiores?</td>
      <td>Omnis.</td>
      <td>Animi!</td>
    </tr>
    <tr>
      <td>Cupiditate.</td>
      <td>Velit.</td>
      <td>Libero.</td>
      <td>Iste.</td>
      <td>Dicta?</td>
    </tr>
    <tr>
      <td>Consequatur!</td>
      <td>Nobis.</td>
      <td>Aperiam!</td>
      <td>Odio.</td>
      <td>Nemo!</td>
    </tr>
    <tr>
      <td>Dolorem.</td>
      <td>Distinctio?</td>
      <td>Provident?</td>
      <td>Nisi!</td>
      <td>Impedit?</td>
    </tr>
    <tr>
      <td>Accusantium?</td>
      <td>Ea.</td>
      <td>Doloribus.</td>
      <td>Nobis.</td>
      <td>Maxime?</td>
    </tr>
    <tr>
      <td>Molestiae.</td>
      <td>Rem?</td>
      <td>Enim!</td>
      <td>Maxime?</td>
      <td>Reiciendis!</td>
    </tr>
    <tr>
      <td>Commodi.</td>
      <td>At.</td>
      <td>Earum?</td>
      <td>Fugit.</td>
      <td>Maxime?</td>
    </tr>
    <tr>
      <td>Eligendi?</td>
      <td>Quis.</td>
      <td>Error?</td>
      <td>Atque.</td>
      <td>Perferendis.</td>
    </tr>
    <tr>
      <td>Quidem.</td>
      <td>Odit!</td>
      <td>Tempore.</td>
      <td>Voluptates.</td>
      <td>Facere!</td>
    </tr>
    <tr>
      <td>Repudiandae!</td>
      <td>Accusamus?</td>
      <td>Soluta.</td>
      <td>Incidunt.</td>
      <td>Aliquid?</td>
    </tr>
    <tr>
      <td>Quisquam?</td>
      <td>Eius.</td>
      <td>Obcaecati?</td>
      <td>Maxime.</td>
      <td>Nihil.</td>
    </tr>
    <tr>
      <td>Minus.</td>
      <td>Magni?</td>
      <td>Necessitatibus?</td>
      <td>Asperiores.</td>
      <td>Iure.</td>
    </tr>
    <tr>
      <td>Ipsa!</td>
      <td>Temporibus.</td>
      <td>Non!</td>
      <td>Dolore.</td>
      <td>Veritatis.</td>
    </tr>
    <tr>
      <td>Ea!</td>
      <td>Officia?</td>
      <td>Doloribus?</td>
      <td>Deleniti?</td>
      <td>Dolorem!</td>
    </tr>
    <tr>
      <td>Sequi?</td>
      <td>Molestias!</td>
      <td>Nesciunt.</td>
      <td>Qui.</td>
      <td>Doloribus?</td>
    </tr>
    <tr>
      <td>Id.</td>
      <td>Enim?</td>
      <td>Quam!</td>
      <td>Sunt!</td>
      <td>Consequuntur.</td>
    </tr>
    <tr>
      <td>Reprehenderit?</td>
      <td>Ut?</td>
      <td>Veritatis!</td>
      <td>Corporis!</td>
      <td>Ipsa.</td>
    </tr>
    <tr>
      <td>Blanditiis!</td>
      <td>Veniam!</td>
      <td>Tenetur.</td>
      <td>Eos?</td>
      <td>Repellat!</td>
    </tr>
    <tr>
      <td>Enim?</td>
      <td>Atque!</td>
      <td>Aspernatur?</td>
      <td>Fugit.</td>
      <td>Voluptatibus!</td>
    </tr>
    <tr>
      <td>Nihil.</td>
      <td>Distinctio!</td>
      <td>Aut!</td>
      <td>Rerum!</td>
      <td>Dolorem?</td>
    </tr>
    <tr>
      <td>Inventore!</td>
      <td>Hic.</td>
      <td>Explicabo.</td>
      <td>Sit.</td>
      <td>A.</td>
    </tr>
    <tr>
      <td>Inventore.</td>
      <td>A.</td>
      <td>Nam.</td>
      <td>Beatae.</td>
      <td>Consequatur.</td>
    </tr>
    <tr>
      <td>Eligendi.</td>
      <td>Illum.</td>
      <td>Enim?</td>
      <td>Dignissimos!</td>
      <td>Ducimus?</td>
    </tr>
    <tr>
      <td>Eligendi!</td>
      <td>Fugiat?</td>
      <td>Deleniti!</td>
      <td>Rerum?</td>
      <td>Delectus?</td>
    </tr>
    <tr>
      <td>Sit.</td>
      <td>Nam.</td>
      <td>Eveniet?</td>
      <td>Veritatis.</td>
      <td>Adipisci!</td>
    </tr>
    <tr>
      <td>Nostrum?</td>
      <td>Totam?</td>
      <td>Voluptates!</td>
      <td>Ab!</td>
      <td>Consequatur.</td>
    </tr>
    <tr>
      <td>Error!</td>
      <td>Dicta?</td>
      <td>Voluptatum?</td>
      <td>Corporis!</td>
      <td>Ea.</td>
    </tr>
    <tr>
      <td>Vel.</td>
      <td>Asperiores.</td>
      <td>Facere.</td>
      <td>Quae.</td>
      <td>Fugiat.</td>
    </tr>
    <tr>
      <td>Libero?</td>
      <td>Molestias.</td>
      <td>Praesentium!</td>
      <td>Accusantium!</td>
      <td>Tenetur.</td>
    </tr>
    <tr>
      <td>Eveniet.</td>
      <td>Quam.</td>
      <td>Quibusdam.</td>
      <td>Eaque?</td>
      <td>Dolore!</td>
    </tr>
    <tr>
      <td>Asperiores.</td>
      <td>Impedit.</td>
      <td>Ullam?</td>
      <td>Quod.</td>
      <td>Placeat.</td>
    </tr>
    <tr>
      <td>In?</td>
      <td>Aliquid.</td>
      <td>Voluptatum!</td>
      <td>Omnis?</td>
      <td>Magni.</td>
    </tr>
    <tr>
      <td>Autem.</td>
      <td>Earum!</td>
      <td>Debitis!</td>
      <td>Eius.</td>
      <td>Incidunt.</td>
    </tr>
    <tr>
      <td>Blanditiis?</td>
      <td>Impedit.</td>
      <td>Libero?</td>
      <td>Reiciendis!</td>
      <td>Tempore.</td>
    </tr>
    <tr>
      <td>Quasi.</td>
      <td>Reiciendis.</td>
      <td>Aut?</td>
      <td>Architecto?</td>
      <td>Vero!</td>
    </tr>
    <tr>
      <td>Fuga!</td>
      <td>Illum!</td>
      <td>Tenetur!</td>
      <td>Vitae.</td>
      <td>Natus.</td>
    </tr>
    <tr>
      <td>Dolorem?</td>
      <td>Eaque!</td>
      <td>Vero?</td>
      <td>Quibusdam.</td>
      <td>Deleniti?</td>
    </tr>
    <tr>
      <td>Minus.</td>
      <td>Accusantium?</td>
      <td>Ab.</td>
      <td>Cupiditate.</td>
      <td>Atque?</td>
    </tr>
    <tr>
      <td>Hic.</td>
      <td>Eligendi.</td>
      <td>Sit?</td>
      <td>Nihil.</td>
      <td>Dolor.</td>
    </tr>
    <tr>
      <td>Quidem.</td>
      <td>In?</td>
      <td>Nesciunt?</td>
      <td>Adipisci.</td>
      <td>Neque.</td>
    </tr>
    <tr>
      <td>Eos.</td>
      <td>Incidunt!</td>
      <td>Quis?</td>
      <td>Quod?</td>
      <td>Vitae!</td>
    </tr>
    <tr>
      <td>Ullam!</td>
      <td>Facilis.</td>
      <td>Tempora!</td>
      <td>Accusantium.</td>
      <td>Consequuntur?</td>
    </tr>
    <tr>
      <td>Numquam?</td>
      <td>At.</td>
      <td>Incidunt.</td>
      <td>Tenetur?</td>
      <td>Voluptatem.</td>
    </tr>
    <tr>
      <td>Iusto?</td>
      <td>Inventore.</td>
      <td>Molestias.</td>
      <td>Accusantium.</td>
      <td>Sunt.</td>
    </tr>
    <tr>
      <td>Repellendus!</td>
      <td>Ex.</td>
      <td>Magnam.</td>
      <td>Odit!</td>
      <td>Iste?</td>
    </tr>
    <tr>
      <td>Id!</td>
      <td>Reiciendis?</td>
      <td>Rem.</td>
      <td>Quae!</td>
      <td>Laborum?</td>
    </tr>
    <tr>
      <td>Exercitationem?</td>
      <td>Maiores.</td>
      <td>Minima.</td>
      <td>Nemo!</td>
      <td>Sequi.</td>
    </tr>
    <tr>
      <td>Qui.</td>
      <td>Impedit?</td>
      <td>Reprehenderit.</td>
      <td>Distinctio.</td>
      <td>Natus?</td>
    </tr>
    <tr>
      <td>Suscipit!</td>
      <td>Tenetur.</td>
      <td>Cumque!</td>
      <td>Molestiae.</td>
      <td>Fugiat?</td>
    </tr>
    <tr>
      <td>Sunt?</td>
      <td>Quis?</td>
      <td>Officia.</td>
      <td>Incidunt.</td>
      <td>Voluptate.</td>
    </tr>
    <tr>
      <td>Possimus.</td>
      <td>Mollitia!</td>
      <td>Eveniet!</td>
      <td>Temporibus.</td>
      <td>Mollitia!</td>
    </tr>
    <tr>
      <td>Incidunt.</td>
      <td>Fugiat.</td>
      <td>Error.</td>
      <td>Odit.</td>
      <td>Cumque?</td>
    </tr>
    <tr>
      <td>Maxime?</td>
      <td>Qui!</td>
      <td>Sapiente!</td>
      <td>Natus.</td>
      <td>Soluta?</td>
    </tr>
  </tbody>
</table>
</body>
</html>

 

标签：Incidunt,Accusantium,sticky,Tenetur,Enim,position,table
From： https://www.cnblogs.com/benbentu/p/17805615.html

相关文章

  • 数据结构与算法 | 哈希表（Hash Table）
    哈希表（HashTable）在二分搜索中提到了在有序集合中查询某个特定元素的时候，通过折半的方式进行搜索是一种很高效的算法。那能否根据特征直接定位元素，而非折半去查找？哈希表（HashTable），也称为散列表，就是一种数据结构，用于实现键-值对的映射关系。它通过将键映射到特定的值（哈希值）来实现......
  • vxe-table树状表格的实现(v3.5.9)
    这段时间改造了一个报表，需要在之前的基础上添加一个分类的维度，之前的报表样子找不到了，应该是用a-table写的普通表格，现在前端表格统一转到vxe-table上去了，记录一下开发树形表格过程中的坑。<vxe-tableborderid="xTable1"ref="xTable1"class="xTable1":column-con......
  • QT高级（1）QTableView自定义委托集合，一个类实现若干委托
    @目录1同系列文章2功能3源码1同系列文章QT中级（1）QTableView自定义委托（一）实现QSpinBox、QDoubleSpinBox委托QT中级（2）QTableView自定义委托（二）实现QProgressBar委托QT中级（3）QTableView自定义委托（三）实现QCheckBox委托并且将QCheckBox居中QT中级（4）QTableView自定义委托（四）实现QDateTi......
  • 抢先体验！超强的 Anchor Positioning 锚点定位
    本文，将向大家介绍CSS规范中，最新的AnchorPositioning，翻译为锚点定位。AnchorPosition的出现，极大的丰富了CSS的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯CSS实现的功能。AnchorPosition当前仍属于实验室功能，新版本Chrome开......
  • MySQL的create table as 与create table like区别
    一、区别对于mysql的复制相同表结构方法，有createtableas和createtablelike两种：createtablet2asselect*fromt1；as创建出来的t2表（新表）缺少t1表（源表）的索引信息，只有表结构相同，没有索引。createtablet2liket1；like创建出来的新表包含源表的完整表结构和索引......
  • Tableau-漏斗图
    漏斗图.xlsx1.数据2.画图1.柱状折线式在右边可以快速调整顺序添加折线并与柱状图双轴调整同步轴并编辑轴将左边的轴倒序在每个折线功能区添加标签2.区域折线式和上面的流程一样，但只用折线然后倒序并选择区域......
  • python sqlalchemy 动态设置表名__tablename__，一个model对应多个table
    fromsqlalchemyimportcreate_engine,Column,BigInteger,Stringfromsqlalchemy.ext.declarativeimportdeclarative_basefromsqlalchemy.ormimportsessionmakerbase=declarative_base()engine=create_engine("postgresql://postgresadmin:[email protected]......
  • el-table选中效果及动态修改
    项目有个需求，是点击关联账户，弹窗显示已经关联的，而且表格上还要勾上效果： 这里的交互有两条线：1.勾选表格内容，上方标签显示和隐藏2.删除上方标签，表格中的该条数据去除选中效果......
  • Stable Diffusion新玩法火了！给几个词就能生成动图，连动图人物的表情和动作都能随意控制
    作者|小戏单说大模型AI的发展对人们想象力释放的助力，基于StableDiffusion模型的方法首当其冲。透过文本描述到图像生成技术，大模型为我们的想象力打开了一个恢弘的梦幻世界。透过点滴文字，就有可能重现禁锢在我们脑海中无法释放的光怪陆离。而最近，StableDiffusion持续进化，......
  • css控制table首列固定内容滚动
    tabletbody{display:block;height:500px;overflow-y:scroll;}tablethead,tbodytr{display:table;width:100%;table-layout:fixed;box-s......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99