制作滚动表格，表格头不动，内容滚动

最新推荐文章于 2022-08-14 22:30:24 发布

oIdmonk

最新推荐文章于 2022-08-14 22:30:24 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/xjy9266/article/details/80947813

版权

有这个需求，其实也不难，就是弄两个表格组合，结合marquue标签就行了，代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 <!--
 6 th, td {
 7     width: 12.5%;
 8     overflow: hidden;
 9     white-space: nowrap;
10     text-overflow: ellipsis;
11     height: 40px;
12     vertical-align: middle;
13     text-align: center;
14 }
15 -->
16 </style>
17 </head>
18 <body>
19 
20     <div style="padding: 20px;">
21         <h1 class="page-header">实时最新10条数据列表</h1>
22         <table class="table table-bordered table-striped table-condensed " style="margin-bottom: 0px; width: 100%">
23             <thead>
24                 <th>用户名</th>
25                 <th>点击按钮</th>
26                 <th>所属页面</th>
27                 <th>点击类型</th>
28                 <th>点击X坐标</th>
29                 <th>点击Y坐标</th>
30                 <th>请求地址</th>
31                 <th>点击时间</th>
32             </thead>
33         </table>
34         <div id="flushDIV">
35             <marquee direction="up" scrollamount="4" bgcolor="#fcf8e3" onmouseout="this.start()" onmouseover="this.stop()"
36                 width="100%">
37             <table style="table-layout: fixed" class="table table-hover table-bordered table-striped table-condensed " style="width: 100%">
38                 <c:forEach items="${userActions }" var="list" varStatus="statu" begin="0" end="9">
39                     <tr>
40                         <td title="${list.userid }"><c:if test="${empty list.userid }">无</c:if>${list.userid }</td>
41                         <td title="${list.text }"><c:if test="${empty list.text }">无</c:if>${list.text }</td>
42                         <td title="${list.description }"><c:if test="${empty list.description }">无</c:if>${list.description }</td>
43                         <td title="${list.type }"><c:if test="${empty list.type }">无</c:if>${list.type }</td>
44                         <td title="${list.x }"><c:if test="${empty list.x }">无</c:if>${list.x }</td>
45                         <td title="${list.y }"><c:if test="${empty list.y }">无</c:if>${list.y }</td>
46                         <td title="${list.url }"><c:if test="${empty list.url }">无</c:if>${list.url }</td>
47                         <td title="${list.dateTime }"><c:if test="${empty list.dateTime }">无</c:if>${list.dateTime }</td>
48                     </tr>
49                 </c:forEach>
50             </table>
51             </marquee>
52         </div>
53     </div>
54 </body>
55 <script>
56     setInterval(function() { 
57         var index=layer.msg('数据更新中...', {icon: 16,time:0});
58         $.ajax({
59             type : 'GET',
60             url : "${ctx}/data/getData.html",
61             dataType : "html",
62             cache : false,
63             success : function(data) {
64                 layer.close(index)
65                 $('#flushDIV').html(data);
66             }
67         });
68     }, 10000);
69 </script>
70 </html>

效果如下：

oIdmonk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
制作滚动表格，表格头不动，内容滚动

&#13; 有这个需求，其实也不难，就是弄两个表格组合，结合marquue标签就行了，代码如下：&#13;&#13; 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;&#13; ...
复制链接

扫一扫