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

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. CMD批处理循环,太强大了(转)

    终极dos批处理循环命令详解格式:FOR [参数] %%变量名 IN (相关文件或命令)   DO 执行的命令 作用:对一个或一组文件,字符串或命令结果中的每一个对象执行特定命令,达到我们想要的结果. ...

  2. MySQL表与表之间的SQL Joins图介绍

    下图很好的解释了各表之间SQL Joins之间的关系

  3. 自动化运维之PSSH

    1.PSSH简介 PSSH提供OpenSSH和相关工具的并行版本.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括psshlib,可以在自定义应用程序中使用. pssh是py ...

  4. pip install whl

    $ pip install --download /tmp/offline_packages -r requirements.txt $ pip install --no-index --find-l ...

  5. 【Linux】Centos下安装ffmpeg

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

  6. 全面理解Java内存模型(JMM)及volatile关键字(转载)

    关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...

  7. 用.NET开发的磁力搜索引擎——btbook.net

    UPDATE:目前项目已停止维护,本文仅留作纪念. 去年10月份开始研究相关的协议与资料,中途乱七八糟的事情差点没坚持下来,寒假里修修补补上礼拜把Btbook发布了,经过社交网络的推广之后,上线第三天 ...

  8. 基于properties文件的Spring Boot多环境切换

    当我们使用properties文件作为Spring Boot的配置文件而不是yaml文件时,怎样实现多环境使用不同的配置信息呢?     在Spring Boot中,多环境配置的文件名需要满足appl ...

  9. linux服务器ssh防爆破

    查看爆破次数记录 # cat /var/log/secure | awk '/Failed/{print $(NF-3)}' | sort | uniq -c | awk '{print $2&quo ...

  10. 【Unity】微信支付SDK官方安卓Demo的使用问题

    Unity3d使用微信支付是属于APP内发起支付调用的情况,其本质上是在安卓项目上使用微信SDK,安卓项目开发完成后再导入到Unity中作为Unity插件使用,即Unity中C#调用安卓(Java)代 ...