html table冻结列

时间：2021-01-26 13:41:09
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!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>

  <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 != ) {

                $("#" + 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", "");

            });

            var HeadHeight = $("#" + TableID + "_tableHead thead").height();

            HeadHeight += ;

            $("#" + TableID + "_tableHead").css("height", HeadHeight);

            $("#" + TableID + "_tableFix").css("height", HeadHeight);

            var ColumnsWidth = ;

            var ColumnsNumber = ;

            $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {

                ColumnsWidth += $(this).outerWidth(true);

                ColumnsNumber++;

            });

            ColumnsWidth += ;

            ColumnsWidth--;

            //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": "", "background-color": "Silver" });

            $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - , "position": "relative", "z-index": "", "background-color": "Silver" });

            $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - , "position": "relative", "z-index": "", "background-color": "Silver" });

            $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "" });

            if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {

                $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());

                $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + );

            }

            if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {

                $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());

                $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + );

            }

            $("#" + 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", , , );

    });

  </script>

</head>

<body>

  <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="" cellspacing="" cellpadding="">

    <thead>

      <tr>

        <th style="text-align: center; width: 80px" rowspan="">姓名</th>

        <th style="text-align: center; width: 80px" rowspan="">班级</th>

        <th style="text-align: center" colspan="">成绩</th>

      </tr>

      <tr>

        <th style="text-align: center" colspan="">主科</th>

        <th style="text-align: center" colspan="">文科</th>

        <th style="text-align: center" colspan="">理科</th>

        <th style="text-align: center; width: 80px" rowspan="">总分</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></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td>学生32</td>

        <td>班级1</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

相关文章