/****************************************************************

jQuery 插件.

功能: 固定表格标题行或列头

Version: 1.0

调用方法:
$('#myTable').fixTable(
pRow, //可滚动区域第一行的行号
pCol, //可滚动区域第一列的列号
splitColor, //(可选)固定区域与滚动区域的分隔线颜色
); ****************************************************************/ jQuery.fn.extend({
fixTable: function (pRow, pCol, splitColor) {
//滚动条宽度
var scrW = 16; //设置分隔线颜色
if (!splitColor) {
splitColor = '#333';
} //得到表格本身
var t = $(this);
var pid = 'fixbox_' + t.attr('id'); t.show(); //得到表格实际大小
var tw = t.outerWidth(true);
var th = t.outerHeight(true); //在外部包一个DIV,用来获取允许显示区域大小
t.wrap("<div id='" + pid + "' ></div>");
var p = $('#' + pid);
p.css({
width: '100%',
height: '100%',
border: '0px',
margin: '0 0 0 0',
padding: '0 0 0 0'
}); //允许显示区域大小
t.hide();
var cw = p.outerWidth(true);
var ch = p.outerHeight(true);
t.show(); //拿到表格的HTML代码
var thtml = p.html(); //判断是否需要固定行列头
if (tw <= cw && th <= ch) {
return;
}
//判断需要固定行/列/行列
var fixType = 4; //全固定
if (tw <= cw - scrW) { //宽度够, 高度不够
fixType = 1; //行固定
cw = tw + scrW;
} else if (th <= ch - scrW) { //高度够, 宽度不够
fixType = 2; //列固定
ch = th + scrW;
}
//固定单元格的位置
var w1 = 0;
var h1 = 0; var post = t.offset(); var p1, p2, p3, p4;
if (fixType == 4) { //行头列头都需固定
//取出指定行列单元格左上角的位置,单位px
var pos = t.find('tr').eq(pRow).find('td').eq(pCol).offset(); w1 = pos.left - post.left;
h1 = pos.top - post.top; var tmp = '<table style="background: #ECE9D8;" ';
tmp += 'border="0" cellspacing="0" cellpadding="0">';
tmp += '<tr><td style="border-right: 1px solid ' + splitColor +
';border-bottom: 1px solid ' + splitColor + '">';
tmp += '<div id="' + pid + '1"></div></td>';
tmp += '<td style="border-bottom: 1px solid ' + splitColor +
';"><div id="' + pid + '2"></div></td></tr>';
tmp += '<tr><td valign="top" style="border-right: 1px solid ' +
splitColor + ';"><div id="' + pid + '3"></div></td>';
tmp += '<td><div id="' + pid + '4"></div></td></tr>';
tmp += '</table>'; p.before(tmp); $('div[id^=' + pid + ']').each(function () {
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#' + pid + '1');
p2 = $('#' + pid + '2');
p3 = $('#' + pid + '3');
p4 = $('#' + pid + '4'); //左上角方块
p1.html(thtml).css({ width: w1 - 1, height: h1 - 1 });
p1.find('table:first').attr('id', undefined); //右上方块
p2.html(thtml).css({ width: cw - w1 - scrW, height: h1 - 1 });
p2.find('table:first').css({
position: 'relative',
left: -w1
}).attr('id', undefined); //左下方块
p3.html(thtml).css({ width: w1 - 1, height: ch - h1 - scrW });
p3.find('table:first').css({
position: 'relative',
top: -h1
}).attr('id', undefined); //主方块
p4.append(p).css({
width: cw - w1,
height: ch - h1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: -h1,
left: -w1
}); p.css({ width: tw - w1, height: th - h1, overflow: 'hidden' }); p4.scroll(function () {
p2.scrollLeft($(this).scrollLeft());
p3.scrollTop($(this).scrollTop());
});
} else if (fixType == 1) { //只需固定行头
var pos = t.find('tr').eq(pRow).find('td').first().offset();
h1 = pos.top - post.top; var tmp = '<table style="background: #ECE9D8;" ';
tmp += 'border="0" cellspacing="0" cellpadding="0">';
tmp += '<tr><td style="border-bottom: 1px solid ' + splitColor + '">';
tmp += '<div id="' + pid + '1"></div></td></tr>';
tmp += '<tr><td><div id="' + pid + '2"></div></td></tr>';
tmp += '</table>'; p.before(tmp); $('div[id^=' + pid + ']').each(function () {
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#' + pid + '1');
p2 = $('#' + pid + '2');
//上方方块
p1.html(thtml).css({ width: tw, height: h1 - 1 });
p1.find('table:first').attr('id', undefined); //主方块
p2.append(p).css({
width: cw + 1,
height: ch - h1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: -h1,
left: 0
}); p.css({ width: tw, height: th - h1, overflow: 'hidden' });
} else if (fixType == 2) { //只需固定列头
var pos = t.find('tr').first().find('td').eq(pCol).offset();
w1 = pos.left - post.left; var tmp = '<table style="background: #ECE9D8;" ';
tmp += 'border="0" cellspacing="0" cellpadding="0">';
tmp += '<tr><td valign="top" style="border-right: 1px solid ' + splitColor + '">';
tmp += '<div id="' + pid + '1"></div></td>';
tmp += '<td><div id="' + pid + '2"></div></td></tr>';
tmp += '</table>'; p.before(tmp); $('div[id^=' + pid + ']').each(function () {
$(this).css({
background: 'white',
overflow: 'hidden',
margin: '0 0 0 0',
padding: '0 0 0 0',
border: '0'
});
});
p1 = $('#' + pid + '1');
p2 = $('#' + pid + '2');
//上方方块
p1.html(thtml).css({ width: w1 - 1, height: th });
p1.find('table:first').attr('id', undefined); //主方块
p2.append(p).css({
width: cw - w1,
height: ch + 1,
overflow: 'auto'
}); t.css({
position: 'relative',
top: 0,
left: -w1
}); p.css({ width: tw - w1, height: th, overflow: 'hidden' });
}
}
});

转自:http://bbs.csdn.net/topics/330147945

html table 固定表头和列的更多相关文章

  1. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  2. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  3. HTML table固定表头

    最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...

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

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

  5. jquery固定表头和列头

    1.对网上的开源方法稍作了些修改 <script type="text/javascript">// <![CDATA[ function FixTable(Ta ...

  6. Table 固定表头的几种方法

    <style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: ...

  7. table 固定表头

    1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...

  8. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  9. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

随机推荐

  1. 微信小程序WebSocket报错:Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  2. FileClassify文件日期分类工具

    FileClassify是一款免费的文件按日期分类工具,能够根据文件修改日期,将文件移动或复制到对应的目录中 如果对您有较大的帮助,欢迎捐赠我们,我们对您表示衷心的感谢! 1.输入文件夹和输出文件可以 ...

  3. 【Linux】Centos下安装ffmpeg

    一.准备工作 1.系统环境:CentOS release 6.9 (Final) 2.安装依赖包 yum install -y autoconf automake cmake freetype-dev ...

  4. 最完整苹果IOS个人开发账号升级方法-个人开发账号升级为公司开发者账号常见误区

    1:背景交代 大概晚上10点钟之后在知乎上看到很多人聊审核被拒PLA1.2,主要电商和金融类APP被拒很多.主要原因是 1:发布的APP与改账号关联度很低.(说白苹果怀疑你是山寨APP,不是优质的AP ...

  5. 【PHP】解析PHP中的函数

    目录结构: contents structure [-] 可变参数的函数 变量函数 回调函数 自定义函数库 闭包(Closure)函数的使用 在这篇文章中,笔者将会讲解如何使用PHP中的函数,PHP是 ...

  6. Mysql中NUMERIC和DECIMAL类型区别比较

    decimal(numeric ) 同义,用于精确存储数值 . decimal 数据类型最多可存储 38 个数字,所有数字都能够放到小数点的右边.decimal 数据类型存储了一个准确(精确)的数字表 ...

  7. Fortran一个获取硬件系统信息的函数库

    此函数库提供了 Visual Fortran 上获取硬盘ID,CPU编号,windows安装时间及文件头部校验的四个函数.可用于简单的程序加密.(但切勿用于商业性很强的地方)              ...

  8. 【iCore4 双核心板_ARM】例程二十四:LWIP_DHCP实验——动态分配IP地址

    实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...

  9. 北京Java笔试题整理

    北京Java笔试题整理 1.什么是java虚拟机?为什么ava被称作是"平台无关的编程语言? 答:Java虚拟机可以理解为一个特殊的"操作系统",只是它连接的不是硬件,而 ...

  10. Win7 SP1 64位 旗舰版 IE8 快速稳定 纯净优化 无人值守 自动激活 20180604

    一.系统特色 1.采用微软原版旗舰版定制而成. 2.优化系统服务,关闭一些平时很少使用的服务. 3.精简掉一些无用的东西. 4.系统全程离线制作,不包含任何恶意插件,放心使用. 5.右下角时间加上星期 ...