html table复杂表头、列固定

最新推荐文章于 2024-08-17 16:56:44 发布
最新推荐文章于 2024-08-17 16:56:44 发布
阅读量2.1k 收藏
点赞数
分类专栏： 网站 前端开发 JQuery
JQuery 同时被 3 个专栏收录
104 篇文章 1 订阅
订阅专栏
网站
36 篇文章 1 订阅
订阅专栏
前端开发
16 篇文章 0 订阅
订阅专栏

http://blog.163.com/lang_zi_ming/blog/static/11401617620126592848831/

一、本片文章为Demo

<!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>
 <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>
   <!--
        <tr>
        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            姓名
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            班级
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            语文
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            数学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            英语
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            政治
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            历史
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            地理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            物理
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            化学
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            生物
                        </th>
                        <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                            总分
                        </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>
   <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>
   <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>
   <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>
   <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>
   <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>
mituan1234567
关注
专栏目录
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览
fyqcdbdx的专栏
11-24 4012
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"> new document NAME="Generator" CONT
Jquery Table 固定行和列
05-03
Jquery Table 固定行和列,有需要的朋友拿去
前端技巧——复杂表格在html当中的实现
最新发布
m0_72678953的博客
08-17 601
table {th,td {
冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
yjxfox的专栏
11-27 3877
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     new document                 http://code.jquery.com/jquery-1.6.1.min.js">>     function
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
04-29
复杂表头固定行，固定列，纯css实现，样式可修改，可根据自己要求，更改表头，以及固定列的数量，本人亲测，确实好用
html中表头的合并，类Excel
weixin_33933118的博客
11-15 462
在JSP上，需要做出类似于Excel表头合并的效果时，可以用如下方法。 <tableclass="table_titlelist"id="activityDataTable"> <tr> <throwspan="3"width="30px">大区</th> <throwspa...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery的库文件、Bootstrap的样式文件以及bootstrap-table自身的样式和脚本文件。如果需要实现列固定，还需要...
html Table 表头固定的实现
09-22
在实现固定表头的场景中，colgroup标签可以用来为表头和表格主体中相对应的列指定统一的宽度。这样，无论表格如何滚动，表头列和表格主体的列宽度都会保持一致。 接下来，我们看下如何通过CSS来定义固定表头的效果...
table表头及列固定
10-17
为了实现表头固定，我们通常会在CSS中设置`position: fixed`属性。但是，当涉及到列固定时，问题就变得复杂了，因为浏览器不支持原生的列固定功能。这时，jQuery库可以派上用场，提供更灵活的解决方案。 使用jQuery...
实现Table表头和列固定
08-01
在实现表头固定时，通常将表头部分通过CSS样式设置为`position: fixed`，并设定适当的宽度和高度，使其在页面滚动时始终保持在屏幕顶部。 针对“多表头”，这通常涉及到嵌套的`<thead>`元素。例如，一级表头在最...
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
html表格列锁定例子
06-25
html表格列锁定，能够锁定多列并拖拽，如果锁定的列超出div宽度的话，会取消拖拽效果，只有当需要锁定的列不大于div时显示正常
Table表复杂表头.zip
07-08
Html5 JavaScript jquery PC端， 前端使用JavaScript静态导出Table 复杂表头，固定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"
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
html实现复杂表头
甘蓝的专栏
01-19 7288
html，表头
vue elementui 复杂表头 table
然后他就拿棍子来打我
10-02 1万+
1. elementUI 实现复杂表格 表头由多行多列组成， 左侧和右侧部分列固定， 中间部分为动态列 最终效果图 1.1 表格实现 HtML 内容 <el-table :data="tableData" style="width: 100%" ref="tableRef" :header-cell-style="rowspanStyle" > <!-- left --> <el-table-column label="label-lef.
el-table 复杂表头如何左右固定中间滑动
05-26
el-table 的固定列和滑动功能是通过设置 `fixed` 属性和 `scroll` 属性来实现的。 对于复杂表头，可以通过设置 `column-span` 属性来合并单元格，从而实现跨行或跨列的表头布局。同时，需要注意设置固定列时需要将对应的表头列也设置为固定。 以下是一个示例代码，展示了如何实现复杂表头的左右固定中间滑动功能： ```html <template> <el-table :data="tableData" style="width: 100%;" :column-key="columnKey" :height="tableHeight" :header-cell-style="{padding: '12px 0'}" :row-style="{height: '50px'}" :fixed="fixedColumns" :scroll="{ x: tableWidth, y: tableHeight }" > <el-table-column prop="name" label="姓名" width="150" fixed ></el-table-column> <el-table-column prop="age" label="年龄" width="150" fixed ></el-table-column> <el-table-column label="基本信息" :column-key="'basic'" :align="'center'" :width="basicWidth" :fixed="fixedColumns" > <el-table-column prop="gender" label="性别" :column-span="2" :align="'center'" ></el-table-column> <el-table-column prop="birthday" label="生日" :column-span="2" :align="'center'" ></el-table-column> </el-table-column> <el-table-column label="联系方式" :column-key="'contact'" :align="'center'" :width="contactWidth" :fixed="fixedColumns" > <el-table-column prop="phone" label="电话" :column-span="2" :align="'center'" ></el-table-column> <el-table-column prop="email" label="邮箱" ></el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男', birthday: '2000-01-01', phone: '12345678901', email: 'zhangsan@example.com' }, { name: '李四', age: 20, gender: '女', birthday: '1998-01-01', phone: '12345678902', email: 'lisi@example.com' } // ... ], columnKey: 'name', fixedColumns: 'left', // 左侧固定列 tableWidth: 700, // 表格总宽度 basicWidth: 300, // 基本信息列宽度 contactWidth: 400, // 联系方式列宽度 tableHeight: 400 // 表格高度 } } } </script> ``` 在上述代码中，我们设置了一个复杂表头，其中包含了四个表头列，使用 `column-span` 属性实现了跨行和跨列的合并布局。我们同时设置了两个左侧固定列，即姓名和年龄列，以及两个中间滑动的列，即基本信息和联系方式列。 为了实现固定列和滑动功能，我们在 `el-table-column` 组件中设置了 `fixed` 属性和 `scroll` 属性。其中，`fixed` 属性用于指定该列是否固定，可以设置为 `left`、`right` 或 `true`（表示左右都固定）；`scroll` 属性用于指定表格的滚动区域大小，其中 `x` 属性表示横向滚动区域的宽度，`y` 属性表示纵向滚动区域的高度。 最后，我们需要设置表格的总宽度和高度，以及每个列的宽度。需要注意的是，在设置列宽度时，需要考虑到表头的合并布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值