table列表滚动

最新推荐文章于 2024-07-24 11:31:22 发布

yang&yang

最新推荐文章于 2024-07-24 11:31:22 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_38187583/article/details/88534453

版权

这篇博客介绍了如何使用CSS来实现一个具有滚动功能的表格。内容包括如何设置HTML结构，特别是`<table>`元素，以及如何通过CSS样式控制thead和tbody部分，确保在滚动时表头固定不动。

摘要由CSDN通过智能技术生成

css

<style>
* { margin: 0; padding: 0;}
.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;}
table tr.even{
  background: yellow;
}
table{
    margin-top: -30px;
}
table tr{
   height: 30px;
}
::-webkit-scrollbar {
   display: none;
}
</style>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的jQuery无缝向上滚动效果演示1_dowebok</title> 
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
   $('.myscroll').myScroll({
      speed: 40, //数值越大，速度越慢
      rowHeight: 30 //li的高度
   });
});
</script>