table固定前两列和最后一列，其他滑动显示

最新推荐文章于 2024-01-15 17:59:31 发布

Orcs0000

最新推荐文章于 2024-01-15 17:59:31 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zszs/p/6297722.html

版权

网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #table {
            position: relative;
        }

            #table th:first-child, #table th:nth-child(2), #table th:last-child, #table tr > td:first-child, #table tr > td:nth-child(2), #table tr > td:last-child {
                background-color: #ff0000;
                position: fixed;
                z-index: 2;
            }
    </style>
    <script src="../Scripts/jq/jquery-2.1.4/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(function () {
            if ($("#table>thead>tr>th").length > 5) {
                //设置固定列的th和td的with都为最长的那个td的长度
                var tdWith = 0;
                $("#table tr>td:first-child").each(function (index, item) {
                    if ($(item).width() > tdWith) {
                        tdWith = $(item).width();
                    }

最低0.47元/天解锁文章

Orcs0000

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
table固定前两列和最后一列，其他滑动显示

网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样。网上搜的基本都是4个table做的，数据处理比较麻烦，写了个一个table的，此示例只固定了前两列和最后一列，和网上的不太一样...
复制链接

扫一扫