冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器

最新推荐文章于 2024-08-13 17:19:23 发布
最新推荐文章于 2024-08-13 17:19:23 发布
阅读量3.8k 收藏
点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <META NAME="Generator" CONTENT="EditPlus,Microshaoft">
    <META NAME="Author" CONTENT="EditPlus,Microshaoft">
    <META NAME="Keywords" CONTENT="EditPlus,Microshaoft">
    <META NAME="Description" CONTENT="EditPlus,Microshaoft">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
<!--
    function FixTable(TableID, FixColumnNumber, width, height) {
    /// <summary>
    ///     锁定表头和列
    ///     <para> sorex.cnblogs.com </para>
    /// </summary>
    /// <param name="TableID" type="String">
    ///     要锁定的Table的ID
    /// </param>
    /// <param name="FixColumnNumber" type="Number">
    ///     要锁定列的个数
    /// </param>
    /// <param name="width" type="Number">
    ///     显示的宽度
    /// </param>
    /// <param name="height" type="Number">
    ///     显示的高度
    /// </param>
    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
    var oldtable = $("#" + TableID);
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    HeadHeight += 2;
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth += 2;
    if ($.browser.msie) {
        switch ($.browser.version) {
            case "7.0":
                if (ColumnsNumber >= 3) ColumnsWidth--;
                break;
            case "8.0":
                if (ColumnsNumber >= 2) ColumnsWidth--;
                break;
        }
    }
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
$(document).ready(function () {
            FixTable("MyTable", 2, 600, 400);
        });
//-->
</script>
</head>
<body>
鸣谢原文转自
<br>
<a href="http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html">http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html</a>
<br>
<table
    style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
    id="MyTable"
    border="1"
    cellspacing="0"
    cellpadding="0"
>
<thead>
    <tr>
        <th style="text-align: center; width: 80px" rowspan="3">
            姓名
        </th>
        <th style="text-align: center; width: 80px" rowspan="3">
            班级
        </th>
        <th style="text-align: center" colspan="10">
            成绩
        </th>
    </tr>
    <tr>
        <th style="text-align: center" colspan="3">
            主科
        </th>
        <th style="text-align: center" colspan="3">
            文科
        </th>
        <th style="text-align: center" colspan="3">
            理科
        </th>
        <th style="text-align: center; width: 80px" rowspan="2">
            总分
        </th>
        </tr>
    <tr>
        <th style="text-align: center; width: 80px">
            语文
        </th>
        <th style="text-align: center; width: 80px">
            数学
        </th>
        <th style="text-align: center; width: 80px">
            英语
        </th>
        <th style="text-align: center; width: 80px">
            政治
        </th>
        <th style="text-align: center; width: 80px">
            历史
        </th>
        <th style="text-align: center; width: 80px">
            地理
        </th>
        <th style="text-align: center; width: 80px">
            物理
        </th>
        <th style="text-align: center; width: 80px">
            化学
        </th>
        <th style="text-align: center; width: 80px">
            生物
        </th>
    </tr>
   </thead>

 <tbody>
    <!-- 数据行 -->
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
                <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
        <tr>
            <td>
                学生32
            </td>
            <td>
                班级1
            </td>
            <td>
                29
            </td>
            <td>
                25
            </td>
            <td>
                146
            </td>
            <td>
                28
            </td>
            <td>
                79
            </td>
            <td>
                73
            </td>
            <td>
                47
            </td>
            <td>
                8
            </td>
            <td>
                91
            </td>
            <td>
                526
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

yjxfox
关注
html表格固定右侧列,jQuery锁定表头和固定列插件FixedTable
weixin_36039533的博客
05-31 1035
插件描述：fixedTable是普通table的一个变体，在后台管理中我们经常使用表格，一个表格会有很多的列，并且每一列的长度还必须那么长，可能最后一列会有很多的操作按钮，这就会导致有很多的列会换行，FixedTable就是其中的解决方案之一更新时间：2020-06-0323:53:07更新内容：jQuery版本表格宽度算法优化更新时间：2017/9/30 下午11:19:40更新说明：修复aj...
复杂表头固定表头和列.html
04-29
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
html -table 实现复杂表头
热门推荐
技术积累
04-12 2万+
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。在html中&lt;td&gt; 标签定义 HTML 表格中的标准单元格。　　(1)rowspan 属性规定单元格可横跨的行数;　　(2)colspan 属性规定单元格可横跨的列数。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 687
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
html table 固定表头和列
weixin_30500473的博客
08-02 333
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: 1.0 调用方法: $('#myTable').fixTable( pRow, //可滚动区域第一行的行号 pCol, //可滚动区域第一列...
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
html中表头的合并，类Excel
weixin_33933118的博客
11-15 475
在JSP上，需要做出类似于Excel表头合并的效果时，可以用如下方法。 <tableclass="table_titlelist"id="activityDataTable"> <tr> <throwspan="3"width="30px">大区</th> <throwspa...
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery的库文件、Bootstrap的样式文件以及bootstrap-table自身的样式和脚本文件。如果需要实现列固定，还需要...
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...
table的行列冻结、行冻结、列冻结
06-13
本主题主要围绕"table的行列冻结、行冻结、列冻结"展开，讲解如何使用jQuery实现这一功能，并确保其在主流浏览器上的兼容性。 首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也...
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
Table表复杂表头.zip
07-08
Html5 JavaScript jquery PC端， 前端使用JavaScript静态导出Table 复杂表头，固定table复杂表头
Jquery Table 固定行和列
05-03
Jquery Table 固定行和列,有需要的朋友拿去
html table实现复杂表头的示例代码
11-20
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。 在html中<td> 标签定义 HTML 表格中的标准单元格。 　　(1)rowspan 属性规定单元格可横跨的行数; 　　(2)colspan 属性规定单元格可横跨的列数。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多表头表格</title> </head> <body> <table id="tab" cellpadding="1"
html实现复杂表头
甘蓝的专栏
01-19 7350
html，表头
复杂表头表格，部分表头需要合并，并且表格较长时横向有滚动条，固定自定义列不动，方便查看数据
iuan429520的博客
07-04 351
复杂表头表格，部分表头需要合并，并且表格较长时横向有滚动条，固定自定义列不动，方便查看数据
Bootstrap Table 冻结列IE兼容性修复：实现动态冻结列
本文主要探讨了在使用Bootstrap Table实现表格冻结列功能时遇到的IE浏览器兼容性问题。Bootstrap Table本身提供的fixed columns 功能在Chrome等现代浏览器上表现良好，但在IE浏览器（如IE11和IE10）中存在缺陷，冻结...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值