制作滚动表格，表格头不动，内容滚动
Posted oldmonk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作滚动表格，表格头不动，内容滚动相关的知识，希望对你有一定的参考价值。
有这个需求，其实也不难，就是弄两个表格组合，结合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>
效果如下：
以上是关于制作滚动表格，表格头不动，内容滚动的主要内容，如果未能解决你的问题，请参考以下文章
html中表格水平和垂直滚动,表头垂直不动,可以水平滚动，大神们请问怎么实现啊？
layui table 表格出现表头和内容不对齐问题解决方法