您的位置：首页 > 其它

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

2017-08-25 09:10 323 查看

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!--
th, td {
width: 12.5%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 40px;
vertical-align: middle;
text-align: center;
}
-->
</style>
</head>
<body>

<div style="padding: 20px;">
<h1 class="page-header">实时最新10条数据列表</h1>
<table class="table table-bordered table-striped table-condensed " style="margin-bottom: 0px; width: 100%">
<thead>
<th>用户名</th>
<th>点击按钮</th>
<th>所属页面</th>
<th>点击类型</th>
<th>点击X坐标</th>
<th>点击Y坐标</th>
<th>请求地址</th>
<th>点击时间</th>
</thead>
</table>
<div id="flushDIV">
<marquee direction="up" scrollamount="4" bgcolor="#fcf8e3" onmouseout="this.start()" onmouseover="this.stop()"
width="100%">
<table style="table-layout: fixed" class="table table-hover table-bordered table-striped table-condensed " style="width: 100%">
<c:forEach items="${userActions }" var="list" varStatus="statu" begin="0" end="9">
<tr>
<td title="${list.userid }"><c:if test="${empty list.userid }">无</c:if>${list.userid }</td>
<td title="${list.text }"><c:if test="${empty list.text }">无</c:if>${list.text }</td>
<td title="${list.description }"><c:if test="${empty list.description }">无</c:if>${list.description }</td>
<td title="${list.type }"><c:if test="${empty list.type }">无</c:if>${list.type }</td>
<td title="${list.x }"><c:if test="${empty list.x }">无</c:if>${list.x }</td>
<td title="${list.y }"><c:if test="${empty list.y }">无</c:if>${list.y }</td>
<td title="${list.url }"><c:if test="${empty list.url }">无</c:if>${list.url }</td>
<td title="${list.dateTime }"><c:if test="${empty list.dateTime }">无</c:if>${list.dateTime }</td>
</tr>
</c:forEach>
</table>
</marquee>
</div>
</div>
</body>
<script>
setInterval(function() {
var index=layer.msg('数据更新中...', {icon: 16,time:0});
$.ajax({
type : 'GET',
url : "${ctx}/data/getData.html",
dataType : "html",
cache : false,
success : function(data) {
layer.close(index)
$('#flushDIV').html(data);
}
});
}, 10000);
</script>
</html>

效果如下：

　　　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航