固定表格

经常使用,笔记用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    .table{
        margin-bottom:0;
        border:0;
    }
    .body-first{
        overflow: hidden;
    }
    .body-second{
        overflow: scroll;
    }
    .body-first,.body-second{
        width: 570px;
    }
    .header-second,.body-second{
        height: 500px;
    }
    .header-first,.header-second{
        width: 250px;
        overflow: hidden;
    }
    .header-first th,.header-second td,.body-first th,.body-second td{
        width: 100px;
    }
    .coupons-title li{
        width:49%;
    }
</style>

<c:if test="${dataList!= null && fn:length(dataList) > 0}">
    <table cellspacing="0" cellpadding="0" class="text-center mt20">
        <tr>
            <td>
                <div class="header-first">
                    <table class="table text-center table-fixed data-table">
                        <thead>
                            <tr>
                                <th>左侧固定列 头部1</th>
                                <th>左侧固定列 头部2</th>
                                <th>左侧固定列 头部3</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="header-second">
                    <table class="table text-center table-fixed data-table">
                        <thead>
                            <tr>
                                <td>左侧固定列 内容1</td>
                                <td>左侧固定列 内容2</td>
                                <td>左侧固定列 内容3</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </td>
            <td>
                <div class="body-first">
                    <table class="table text-center table-fixed data-table">
                        <thead id="bodyData">
                            <th>右侧列 头部1</th>
                            <th>右侧列 头部2</th>
                            <th>右侧列 头部3</th>
                        </thead>
                    </table>
                </div>
                <div class="body-second">
                    <table class="table text-center table-fixed data-table">
                        <tbody>
                            <tr>
                                <td>右侧列 内容1</td>
                                <td>右侧列 内容2</td>
                                <td>右侧列 内容3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</c:if>
<c:if test="${dataList== null || fn:length(dataList) == 0}">
    <div class="notSearchContent">没有查到数据，试试其他查询条件吧！</div>
</c:if>
<script>
//设置表格
    function setTable(){
        //初始化宽度和高度;
        var bodyFirstWidth=$('.body-first table').width();
        var headerSecondHeight=$('.header-second table').height();
        $('.body-second table').width(bodyFirstWidth);
        $('.body-second table').height(headerSecondHeight);

        //设置滚动
        $('.body-second').on('scroll',function(){
            var left = $(this).scrollLeft();
            var top = $(this).scrollTop();
            $('.body-first table').css('margin-left',(-left)+'px');
            $('.header-second table').css('margin-top',(-top)+'px');
        });
    };
   setTable();
</script>