table 固定表头
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> tr th { margin-top: -1px; position: relative; } </style> </head> <body> <div id="table" style="overflow: auto;height:200px;"> <table class="table"> <thead class="table-header"> <tr> <th>1</th> <th>1</th> <th>1</th> <th>1</th> </tr> </thead> <tbody> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </tbody> </table> </div> <script src="./../../static/management/js/jquery.min.js"></script> <script> let tableCont = document.querySelectorAll('tr th'); let tableScroll = document.getElementById('table'); tableScroll.onscroll = () => { let scrollTop = tableScroll.scrollTop; if (scrollTop > 0) { for (let i = 0; i < tableCont.length; i++) { tableCont[i].style.top = scrollTop + 'px'; } } else { for (let i = 0; i < tableCont.length; i++) { tableCont[i].style.top = scrollTop + 'px'; } } } </script> </body> </html>