滚动条下拉时 table 的thead 固定在网页固定在顶部不动
一、效果图
二、前端页面
核心代码：
1、固定顶部
position:fixed;top:0px2、左右滚动条
OVERFLOW-X: scroll;width:720px;3、时间内容越出单元格显示
position: relative;bottom:30px;<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<html>
<head>
<title>场地预定</title>
</head>
<style type="text/css">
.table-chang{margin-left: 0px;overflow: hidden;float: left;border-collapse: separate;border-spacing:5px}
.table-chang th{width: 120px;min-width:120px;max-width:120px;height: 60px;font-weight: normal;text-align: center;color: #323232}
.table-chang td{width: 120px;min-width:120px;max-width:120px;height: 60px;background: #FFF;text-align: center;color: #fff;font-size: 20px;padding:0px;border: 1px solid #FFFFFF;}
.table-chang td a{display: block;width: 100%;height: 100%;}
.table-chang td.access{background: #FFF;color:#A62A04;border: 1px dashed #A62A04;}
.table-chang td.unavailable{background: #F0F0F0;color:#C8C8C8}
.table-chang td.unPayed{background: #F0860C;}
.table-chang td div.unPayed{background: #F0860C;}
.table-chang thead th{font-size: 22px;border:1px;background:transparent}
.table-chang thead tr td .time_cell{width:30px;height:30px;text-align: center;color: #323232}
.table-chang tbody tr td .time_cell {width:30px;height:30px;font-size:20px;color:#000;border:0px;background: transparent;}
.table-chang tbody tr td .time_cell span{font-size:22px;float: right;}
</style>
<body>
<div id="reserveStatus" style="OVERFLOW-X: scroll;width:720px;" align=center>
<table class="table-chang">
<thead id="fieldThead" style="position:fixed;top:0px;margin-left:-5px;background-color: #ffffff">
<%--场地--%>
<tr>
<th></th>
<c:forEach items="${venueFieldPriceList}" var="field" varStatus="status">
<th>${field.fieldName}</th>
</c:forEach>
</tr>
<%--场地--%>
</thead>
<tbody>
<div style="margin-top:60px;">
<%-- 遍历所有场地开始--%>
<c:forEach items="${times}" var="t">
<tr>
<%-- 纵坐标：时间--%>
<td style="width: 30px;position: relative;bottom:30px;">
<span class="time_cell">
${fn:substring(t, 0, 5)}
</span>
</td>
<%-- 横坐标：场地状态--%>
<c:forEach items="${venueFieldPriceList}" var="field" varStatus="status">
<c:set var="status" value="0"/>
<%--遍历单个场地的时间、价格组成的Jason 获得状态--%>
<c:forEach items="${field.timePriceList}" var="tp">
<%--场地jason的时间与横坐标的时间一致 --%>
<j:if test="${t eq tp.time}">
<%--设置单个场地 时间T 的状态--%>
<c:set var="status" value="${tp.status}"/>
<c:set var="price" value="${tp.price}"/>
<%-- A场地 B时间 的状态 结束--%>
</j:if>
</c:forEach>
<%--设置td的class--%>
<j:if test="${'0' eq status}">
<c:set var="tdClass" value="reserveTd access"/>
</j:if>
<j:if test="${!('0' eq status)}">
<c:set var="tdClass" value="reserveTd unavailable"/>
</j:if>
<%--设置td的class end--%>
<%-- 场地 B时间 的状态展示--%>
<td status="${status}"
class="${tdClass}"
data-price="${price}"
data-field-id="${field.fieldId}"
data-field-name="${field.fieldName}"
data-time="${t}"
>
<j:if test="${'0' eq status}">
¥ ${price}
</j:if>
<j:if test="${!('0' eq status)}">
<span>已预订</span>
</j:if>
</td>
<%-- A场地 B时间 的状态展示 结束--%>
</c:forEach>
<%-- 横坐标：时间 结束--%>
</tr>
<%-- 纵坐标：场地 结束--%>
</c:forEach>
</div>
<%-- 遍历所有全场 场地结束--%>
</tbody>
</table>
</div>
<div class="row" style="display: none">
<div id="unPayed" class="row">
</div>
<form id="orderForm">
<input name="consDate" value="${consDate}" type="hidden">
<input name="reserveVenueId" value="${venueId}" type="hidden">
<%--<span id="reserve_submit"><a class="btn btn-success col-sm-10" style="height: 80px;width:100%;font-size: 50px;line-height: 80px;" onclick="filedSelectJson()">提交</a></span>--%>
</form>
</div>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
<script>
document.write("<script type='text/javascript' src='${ctxStatic}/modules/reserve/js/reserve_app_field.js?t=" + Math.random() + "'><\/script>");
</script>
</body>
</html>三、当页面左右滑动时，thead也做出相应的移动
$(document).ready(function () {
$("#reserveStatus").scroll(function () {
var scrollLeft=$("#reserveStatus").scrollLeft();
var margin_left=Number(-5)-Number(scrollLeft);
$("#fieldThead").css({"margin-left":margin_left});
});
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年06月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读