Table数据表格无限滚动设计（html+css+JS）

2021-01-23 12:13

阅读：516

YPE html>

标签：find div text getch 请求 dex order 技术 absolute

1.设计html编码如下：

  1 
  2 
  3 "http://www.w3.org/1999/xhtml">
  4"server">
  5     "Content-Type" content="text/html; charset=utf-8" />
  6     数据表格无限循环滚动  7     "_Styles/table.css" rel="stylesheet" />
  8       9      92 
 93 
 94     class="tablebox">
 95         class="tbl-header">
 96             "0" cellspacing="0" cellpadding="3">
 97 98 99100101102103104105106107"opacity: 0;">108                 
                     
                         "text-align: center">班次
                         "text-align: center">交路
                         "text-align: center">司机
                         "text-align: center">学员
                         "text-align: center">出勤时间
                         "text-align: center">出勤地点
                     
                 
                 
             
109         
110         class="tbl-body">
111             "0" cellspacing="0" cellpadding="3">
112113114115116117118119120121122123                 
                     
                         "text-align: center">班次
                         "text-align: center">交路
                         "text-align: center">司机
                         "text-align: center">学员
                         "text-align: center">出勤时间
                         "text-align: center">出勤地点
                     
                 
                 
             
124         
125     
126 
127

View Code

2.引入对应的table.css文件，文件内容如下：

 1 .tablebox {
 2     overflow: hidden;
 3     position: relative;
 4     width: 100%;
 5     height: 99.6%;
 6     border:1px solid #02BCFF;
 7     background-color: #072B5B;
 8 }
 9 
10 .tbl-header {
11     width: 100%;
12     position: absolute;
13     top: 0;
14     left: 0;
15     z-index: 999;
16 }
17 
18 .tbl-body {
19     width: 100%;
20     position: absolute;
21     top: 0;
22     left: 0;
23 }
24 .tablebox table {
25     width: 100%;
26 }
27 
28 .tablebox table th,
29 .tablebox table td {
30     font-size: 20px;
31     color: #21F4FF;
32     line-height: 45px;
33     text-align: left;
34     border:1px solid #02BCFF;
35 }
36 
37 .tablebox table tr th {
38     background-color: #0A3265;
39     cursor: pointer;
40 }
41 
42 .tablebox table tr td {
43     /*background-color: transparent;*/
44 }
45 
46 .tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
47     /*background-color: rgba(31, 31, 156, .5);*/
48 }
49 
50 .tablebox table tr td span,
51 .tablebox table tr td span {
52     font-size: 15px;
53 }

View Code

3.展示效果：（效果会正常无限滚动，图片展示为数据美容）

技术图片

Table数据表格无限滚动设计（html+css+JS）

标签：find div text getch 请求 dex order 技术 absolute

原文地址：https://www.cnblogs.com/qsszyl03290920/p/13278267.html

上一篇：php接口数据安全解决方案

下一篇：js之链判断运算符

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Table数据表格无限滚动设计（html+css+JS）
文章链接：http://soscw.com/index.php/essay/45875.html

亲，登录后才可以留言！

Table数据表格无限滚动设计（html+css+JS）

评论

热门文章

推荐文章

最新文章

置顶文章