制作滾動表格，表格頭不動，內容滾動
阿新 • • 發佈：2017-08-25
header bgcolor xhtml images mouse es2017 str www 內容
有這個需求，其實也不難，就是弄兩個表格組合，結合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>
效果如下：
制作滾動表格，表格頭不動，內容滾動