表格冻结首列及左起指定列数（CongelarFilaColumna插件的使用）

其他 2018-05-10 05:31:30 阅读次数: 0

1，jquery.CongelarFilaColumna.js源码，源码是西班牙（加泰罗尼亚）文，很难看懂，这里加入中英文注解，源码对clone的固定列表体加了背景但是对固定列的固定头没有加背景，会导致有些时候出现表头拖动时出现混乱的情况如下：，已经补充了背景，目前使用良好。

优化后的代码及注释如下：

/*
* CongelarFilaColumna is a  jQuery plugin that allows freezing of rows and columns.
* Scrolling can be enabled. Both rows and columns can be frozen. Rows to be frozen 
* should be placed in 'thead' (whole frozen header). You can freeze rows and columns combined with colspan or rowspan.
*
* Copyright (c) 2016
* Author: Agustin Rios Reyes.
* Email:  [email protected]
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
*/
 /* 
  * by JiangCheng
  		注意Scroll插件的引用使用步骤:
  		1,引用对应的css和js;
  		2,table外层的原有的div按本页面tableScroll样式为准;
  		3,js中在table表格生成之后使用$("#pruebatabla4").CongelarFilaColumna({Columnas:5})代码调用插件中规定的方法 
  */
(function($)
{
	//Freeze Row Column|冻结行和列
	$.fn.CongelarFilaColumna = function (method)
	{
		
		var defaults =
		{
			width:      '100%',
			height:     '100%',
			Columnas:  1, //Number of columns fixed
			soloThead : false //only the fixed header
		};
		
		
		
		var settings = {};
		
		
		//内部方法类
		var methods  =
		{
			init: function (options)
			{
				settings = $.extend({}, defaults, options);

				return this.each(function ()
				{
					var $tabla = $(this); 

					if (helpers._EsUnaTabla($tabla))
					{ 
						methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
					}
					else
					{
						$.error('La Tabla No es válida. :( ');
					};
				});
			},
			setup: function ()
			{
				if ( settings.soloThead )
				{
					var $wrapper,
						$lobTable     = $(this), //lobTable|主表
						lobTable      = this,
						lstClassTable = $lobTable.attr("class");//1st Class Table|获取表样式
					console.log("Solo Thead");
					
					helpers._ObtenerAsignarAnchoAltoThead( $lobTable );//Get Assign High Width Thread|获取分配高宽度头部
					
					//这里是复制一个表的头部
					var lobThead       = $lobTable.find("thead").clone(),
						lnuWidthTable  = $lobTable.width(),//新表宽
						lobTableThead  = $("<table>").attr("class",lstClassTable).append(lobThead);
						
					
					settings.scrollbarOffset  = helpers._OptenerWidthBarraScroll();//Obtain Width Bar Scroll|获取滚动条宽度
					$lobTable.css({'width':lnuWidthTable});

					if (!$lobTable.closest('.fht-table-wrapper').length)//fht-table-wrapper==外框框所有
					{
						$lobTable.addClass('fht-table');//主表加样式
						$lobTable.wrap('<div class="fht-table-wrapper"></div>');//wrap方法把左边选中的元素放到右边的元素中
					}

					$wrapper   = $lobTable.closest('.fht-table-wrapper');

					if ( $wrapper.find('.fht-fixed-body').length == 0)
						$lobTable.wrap('<div class="fht-fixed-body"></div>');//建一个fht-fixed-body放进主表

					$fixedBody = $wrapper.find('.fht-fixed-body');

					$wrapper.css({
						width: settings.width,
						height: settings.height
					});

					/*Agregamos la tabla completa a fht-tbody-conten*/
					
					//We add the full table to fht-tbody-content|将全表放进tbody里面
					$lobTable.wrap('<div class="fht-tbody"><div class="fht-tbody-conten"></div></div>');
					$lobTable.closest('.fht-tbody-conten').css({'width':lnuWidthTable});
					
					$lobDivBody  = $wrapper.find('div.fht-tbody');//找到tbody的div

					/*Agregamos el encabesado clonado al div fht-thead*/
					
					//We add the cloned header to the div th-thead|将复制的表头放进th_thead
					$lobDivTHead = $('<div class="fht-thead"></div>').prependTo($fixedBody).css({'width':lnuWidthTable});
					lobTableThead.css({'width':lnuWidthTable});
					$lobDivTHead.append(lobTableThead).css({'width':lnuWidthTable});

					//主表下移到thead下面
					$lobTable.css({
						'margin-top': -$lobDivTHead.outerHeight(true)
					});

					//获取新的body高
					var lnuTbodyHeight = $wrapper.height() - $lobDivTHead.outerHeight(true);

					//主body宽高重定义
					$lobDivBody.css({
						'height': lnuTbodyHeight,
						'width':lnuWidthTable+settings.scrollbarOffset+2
					});

					//绑定滚动事件
					helpers._bindScroll( $lobDivBody );

					return lobTable;
				}
				else
				{
					var $wrapper,
						$tabla      = $(this), 
						tabla       = this,
						contenedor  = $(this).parent(), 
						classT      = $tabla.attr("class"); //表样式

					helpers._ObtenerAsignarAnchoAlto($tabla); //Get Assign High Width Thread|获取分配高宽度头部

					var thead       = $tabla.find("thead").clone(),//thead复制
						anchotabla  = $tabla.width(),//表宽
						tablaTH     = $("<table>").attr("class",classT).append(thead),//复制表头表
						$tablaTHCol = $("<table>").attr("class",classT).append($("<thead>")),//新建表头
						$tablaTBCol = $("<table>").attr("class",classT).append($("<tbody>"));//新建表体

					settings.scrollbarOffset  = helpers._OptenerWidthBarraScroll();//设置滚动条宽
					$tabla.css({'width':anchotabla});//重置表宽
					
					
					//表头,左表,表身加样式
					tablaTH.addClass('fht-table');
					$tablaTHCol.addClass('fht-table');
					$tablaTBCol.addClass('fht-table');
					
					//Clone Header Columns To Freeze|头部固定列复制
					helpers._ClonarHeaderColumnasACongelar($tabla,$tablaTHCol,'thead',settings.Columnas);
					helpers._ClonarHeaderColumnasACongelar($tabla,$tablaTBCol,'tbody',settings.Columnas);

					//外框样式
					if (!$tabla.closest('.fht-table-wrapper').length)
					{
						$tabla.addClass('fht-table');
						$tabla.wrap('<div class="fht-table-wrapper"></div>');
					}

					//获取外框
					$wrapper = $tabla.closest('.fht-table-wrapper');

					//新建固定列div框
					if ( $wrapper.find('.fht-fixed-column').length == 0)
					{
						$tabla.wrap('<div class="fht-fixed-body"></div>');
						$('<div class="fht-fixed-column"></div>').prependTo($wrapper);
						$fixedBody    = $wrapper.find('.fht-fixed-body');
					}
					
					
					$wrapper.css({
						width: settings.width,
						height: settings.height
					});

					//新建表体div
					if (!$tabla.hasClass('fht-table-init'))
					{
						$tabla.wrap('<div class="fht-tbody"><div class="fht-tbody-conten"></div></div>');
					}

					//表体div赋值为表宽
					$tabla.closest('.fht-tbody-conten').css({'width':anchotabla});
					
					//找到表体
					$divBody = $wrapper.find('div.fht-tbody');

					//新建表头
					if (!$tabla.hasClass('fht-table-init'))
					{

						$divHead = $('<div class="fht-thead"></div>').prependTo($fixedBody).css({'width':anchotabla});
						
						tablaTH.css({'width':anchotabla});

						$divHead.append(tablaTH).css({'width':anchotabla});
					}
					else
					{
						$divHead = $wrapper.find('div.fht-thead');
					}

					//下移表
					$tabla.css({
						//'margin-top': -$divHead.outerHeight(true)
						'margin-top': -$tabla.find('thead').outerHeight(true)
					});

					//表体赋值表高
					var tbodyHeight = $wrapper.height() - $divHead.outerHeight(true);

					$divBody.css({
						'height': tbodyHeight
					});

					//初始化表之后赋值class给表
					$tabla.addClass('fht-table-init');

					//获取固定列
					var $fixedColumn    = $wrapper.find('.fht-fixed-column');

					//新建$thead,$tbody,找到固定表体
					var	$thead          = $('<div class="fht-thead"></div>').append($tablaTHCol),
						$tbody          = $('<div class="fht-tbody"></div>').append($tablaTBCol),
						$fixedBody      = $wrapper.find('.fht-fixed-body'),
						fixedBodyWidth  = $wrapper.width(),//计算固定表体宽
						fixedBodyHeight = $fixedBody.find('.fht-tbody').outerHeight() - settings.scrollbarOffset;//计算固定表体高

					$thead.appendTo($fixedColumn);//固定列赋给表头

					var AnchoCol = $thead.find('table').width()+1;//获取表头宽

					$thead.find('table').css({'width': AnchoCol,'height':$divHead.outerHeight(true),'background-color': '#ffffff'});//表头体赋宽高
					$tbody.find('table').css({'width': AnchoCol});//表体赋宽

					//表体赋值到固定列
					$tbody.appendTo($fixedColumn).css({
						'height': fixedBodyHeight+2,
						'background-color': '#ffffff'
					});
					
					//固定列体赋宽
					$fixedColumn.css({
						'width':  AnchoCol
					});
					
					//固定表体赋宽
					$fixedBody.css({
						'width': fixedBodyWidth
					});

					//对固定表体加滚动事件
					helpers._bindScroll($divBody);
					return tabla;
				};
			}
		}
		
		
		//定义内部类
		var helpers  =
		{
			/*
			* return boolean
			* valida si el elemento tien un thead y un tbody.
			*/
			//It's A Table|判断这是一个表
			_EsUnaTabla: function($obj)
			{
				var $tabla = $obj,
				TieneTable = $tabla.is('table'),
				TieneThead = $tabla.find('thead').length > 0,
				TieneTbody = $tabla.find('tbody').length > 0;

				if (TieneTable && TieneThead && TieneTbody)
				{
					return true;
				}

				return false;
			},
			//Get Assign High Width Thread|获取分配高宽度头部
			_ObtenerAsignarAnchoAltoThead: function($obj)
			{
				var $lobTable = $obj;
				
				//表头滚动
				$lobTable.find("thead tr").each(function()
				{
					$(this).find("th").each(function()
					{
						$(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'});
					});
				});
			},
			
			
			//Get Assign High Width|获取分配高宽度
			_ObtenerAsignarAnchoAlto: function($obj)
			{
				var $tabla         = $obj,
					ThTd           = "",
					rowspanAntes   = false,//rowspan Before
					colspanAntes   = false,//colspan Before
					mascolumnas    = true,//MORE columns
					cuantosColspan = 0,//how many Colspan
					cuentaColumnas = 0,//Columns account
					cuentaRowspan  = 0,//Rowspan account
					cuentafilass   = 0,//count rows
					cuantasCols    = settings.Columnas;//how many Cols

				$tabla.find("tr").each(function(fila)
				{
					var ThTd       = ( $(this).parent().is('thead') ) ? 'th' : ( $(this).parent().is('tbody') ) ? 'td' : 'undefined';//th or td

					if ( cuantasCols == 1 )
					{
						if (!rowspanAntes)
						{
							$(this).find(ThTd).each(function(index)
							{
								if (index == 0)
									{
										if (!colspanAntes) {
											//$(this).css({'background-color': '#F7F2E0'});
											$(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'});
										}
										else
										{
											console.log("Error: colspan in 1 column.");
										}

										if ( $(this).attr( "rowspan" ) ) {
											rowspanAntes  = true;
											cuentaRowspan = $(this).attr("rowspan");
										};
										
										if ( $(this).attr( "colspan" ) ) {
											colspanAntes   = true;
											cuantosColspan = $(this).attr("colspan");
										}
										if (colspanAntes) {
											if (cuantosColspan == cuantasCols) {
												colspanAntes   = false;
												mascolumnas    = false;
												cuentaColumnas = cuantasCols;
											}else if( (cuantasCols-cuantosColspan) > 0){
												colspanAntes   = false;
												mascolumnas    = true;
												cuentaColumnas = cuantosColspan;
											}
										}
									}
							});

							colspanAntes   = false;
							mascolumnas    = true;
							cuantosColspan = 0;
							cuentaColumnas = 1;

							if (rowspanAntes) {
								cuentaRowspan--;
							}
						}
						else
						{
							cuentaRowspan--;
						}

						if ( cuentaRowspan == 0 )
						{
							rowspanAntes = false;

						}
					}
					else
					{
						if (!rowspanAntes)
						{							
							$(this).find(ThTd).each(function(index)
							{
								if(cuentaColumnas < cuantasCols )
								if (index < cuantasCols && mascolumnas)
								{
									if (index == 0)
									{
										if (!colspanAntes)
										{
											//$(this).css({'background-color': '#F7F2E0'});
											$(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'});
										}

										if ( $(this).attr( "rowspan" ) )
										{
											rowspanAntes  = true;
											cuentaRowspan = $(this).attr("rowspan");
										};
										
										if ( $(this).attr( "colspan" ) )
										{
											colspanAntes   = true;
											cuantosColspan = $(this).attr("colspan");
										}

										if (colspanAntes)
										{
											if (cuantosColspan == cuantasCols)
											{
												colspanAntes   = false;
												mascolumnas    = false;
												cuentaColumnas = cuantasCols;
											}
											else if( (cuantasCols-cuantosColspan) > 0)
											{
												colspanAntes   = false;
												mascolumnas    = true;
												cuentaColumnas = cuantosColspan;
											}
										}
									}
									else
									{
										if (colspanAntes)
										{
											if (cuantosColspan == cuantasCols)
											{
												colspanAntes = false;
												mascolumnas  = false;
											}
											else if(cuantosColspan < cuantasCols)
											{
												colspanAntes = false;
												mascolumnas  = true;
											}
										}
										else
										{
											if (!colspanAntes)
											{
												if ( $(this).attr( "colspan" ) )
												{
													colspanAntes   = true;
													cuantosColspan = $(this).attr("colspan");
													cuentaColumnas = parseInt(cuentaColumnas) + parseInt(cuantosColspan);
												}
												else
												{
													cuentaColumnas++;
												}
												//$(this).css({'background-color': '#F7F2E0'});
												$(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'});
											}

											if ( $(this).attr( "rowspan" ) )
											{
												rowspanAntes  = true;
												cuentaRowspan = $(this).attr("rowspan");
											};

											if (colspanAntes)
											{
												if (cuantosColspan == cuantasCols)
												{
													colspanAntes   = false;
													mascolumnas    = false;
													cuentaColumnas = cuantasCols;
												}
												else if(cuentaColumnas == cuantasCols)
												{
													colspanAntes   = false;
													mascolumnas    = false;
													cuentaColumnas = cuantasCols;
												}
												else if( (cuantasCols-cuantosColspan) > 0)
												{
													colspanAntes   = false;
													mascolumnas    = true;
												}
											}
										}								
									}
								}
							});

							colspanAntes   = false;
							mascolumnas    = true;
							cuantosColspan = 0;
							cuentaColumnas = 1;

							if (rowspanAntes) {
								cuentaRowspan--;
							}
						}
						else
						{
							cuentaRowspan--;
						}

						if ( cuentaRowspan == 0 )
						{
							rowspanAntes = false;

						}
					}

					cuentafilass++;
				});
			},
			
			
			//Clone Header Columns To Freeze|头部固定列复制
			_ClonarHeaderColumnasACongelar: function($tabla,$donde,tipothtd,cuantasCols)
			{
				var ThTd           = "",
					rowspanAntes   = false,
					colspanAntes   = false,
					mascolumnas    = true,
					cuantosColspan = 0,
					cuentaColumnas = 0,
					cuentaRowspan  = 0,
					cuentafilass   = 0,
					$trThTd        = $tabla.find(tipothtd),
					$newRow;

				if (tipothtd == "thead")
				{
					ThTd  = "th";
				}
				else if(tipothtd == "tbody")
				{
					ThTd  = "td";
				};

				$trThTd.find("tr").each(function()
				{
					if ( cuantasCols == 1 )
					{
						if (!rowspanAntes)
						{
							var tr = $(this).clone(true).html("");

							$(this).find(ThTd).each(function(index)
							{
								if (index == 0)
									{
										$newRow = tr.appendTo($donde.find(tipothtd));
										if (!colspanAntes) {

											$newRow.append($(this).clone());
										}
										else
										{
											console.log("Error: colspan in 1 column.");
										}

										if ( $(this).attr( "rowspan" ) ) {
											if ( $(this).attr( "rowspan" ) > 0 )
											{
												rowspanAntes  = true;
												cuentaRowspan = $(this).attr("rowspan");
											}
										};
										
										if ( $(this).attr( "colspan" ) ) {
											colspanAntes   = true;
											cuantosColspan = $(this).attr("colspan");
										}
										if (colspanAntes) {
											if (cuantosColspan == cuantasCols) {
												colspanAntes   = false;
												mascolumnas    = false;
												cuentaColumnas = cuantasCols;
											}else if( (cuantasCols-cuantosColspan) > 0){
												colspanAntes   = false;
												mascolumnas    = true;
												cuentaColumnas = cuantosColspan;
											}
										}
									}
							});

							colspanAntes   = false;
							mascolumnas    = true;
							cuantosColspan = 0;
							cuentaColumnas = 1;

							if (rowspanAntes) {
								cuentaRowspan--;
							}
						}
						else
						{
							cuentaRowspan--;
							var tr = $(this).clone(true).html("");
							tr.appendTo($donde.find(tipothtd));
						}

						if ( cuentaRowspan == 0 )
						{
							rowspanAntes = false;

						}
					}
					else
					{
						if (!rowspanAntes)
						{

							var tr = $(this).clone(true).html("");
							
							$(this).find(ThTd).each(function(index)
							{
								if(cuentaColumnas < cuantasCols )
								if (index < cuantasCols && mascolumnas)
								{
									if (index == 0)
									{
										$newRow = tr.appendTo($donde.find(tipothtd));

										if (!colspanAntes)
										{
											$newRow.append($(this).clone());
										}

										if ( $(this).attr( "rowspan" ) )
										{
											if ( $(this).attr( "rowspan" ) > 0 )
											{
												rowspanAntes  = true;
												cuentaRowspan = $(this).attr("rowspan");
											}
										};
										
										if ( $(this).attr( "colspan" ) )
										{
											colspanAntes   = true;
											cuantosColspan = $(this).attr("colspan");
										}

										if (colspanAntes)
										{
											if (cuantosColspan == cuantasCols)
											{
												colspanAntes   = false;
												mascolumnas    = false;
												cuentaColumnas = cuantasCols;
											}
											else if( (cuantasCols-cuantosColspan) > 0)
											{
												colspanAntes   = false;
												mascolumnas    = true;
												cuentaColumnas = cuantosColspan;
											}
										}
									}
									else
									{
										if (colspanAntes)
										{
											if (cuantosColspan == cuantasCols)
											{
												colspanAntes = false;
												mascolumnas  = false;
											}
											else if(cuantosColspan < cuantasCols)
											{
												colspanAntes = false;
												mascolumnas  = true;
											}
										}
										else
										{
											if (!colspanAntes)
											{
												if ( $(this).attr( "colspan" ) )
												{
													colspanAntes   = true;
													cuantosColspan = $(this).attr("colspan");
													cuentaColumnas = parseInt(cuentaColumnas) + parseInt(cuantosColspan);
												}
												else
												{
													cuentaColumnas++;
												}

												$newRow.append($(this).clone());
											}

											if ( $(this).attr( "rowspan" ) )
											{
												if ( $(this).attr( "rowspan" ) > 0 )
												{
													rowspanAntes  = true;
													cuentaRowspan = $(this).attr("rowspan");
												}
											};

											if (colspanAntes)
											{
												if (cuantosColspan == cuantasCols)
												{
													colspanAntes   = false;
													mascolumnas    = false;
													cuentaColumnas = cuantasCols;
												}
												else if(cuentaColumnas == cuantasCols)
												{
													colspanAntes   = false;
													mascolumnas    = false;
													cuentaColumnas = cuantasCols;
												}
												else if( (cuantasCols-cuantosColspan) > 0)
												{
													colspanAntes   = false;
													mascolumnas    = true;
												}
											}
										}								
									}
								}
							});

							colspanAntes   = false;
							mascolumnas    = true;
							cuantosColspan = 0;
							cuentaColumnas = 1;

							if (rowspanAntes) {
								cuentaRowspan--;
							}
						}
						else
						{
							cuentaRowspan--;
							var tr = $(this).clone(true).html("");
							tr.appendTo($donde.find(tipothtd));
						}

						if ( cuentaRowspan == 0 )
						{
							rowspanAntes = false;

						}
					}

					cuentafilass++;
				});
			},
			
			//bind scroll event|绑定滚动
			_bindScroll: function($obj)
			{
				var $tabla   = $obj,
					$wrapper = $tabla.closest('.fht-table-wrapper'),
					$thead   = $tabla.siblings('.fht-thead');

				$tabla.bind('scroll', function()
				{
					if( !settings.soloThead )
					{
						var $fixedColumns = $wrapper.find('.fht-fixed-column');

						$fixedColumns.find('.fht-tbody table').css({
							'margin-top': -$tabla.scrollTop()
						});
					}

					$thead.find('table').css({
						'margin-left': -this.scrollLeft
					});

				});
			},
			//Obtain Width Bar Scroll|获取滚动条宽度
			_OptenerWidthBarraScroll: function()
			{
				var scrollbarWidth = 0;

				if (!scrollbarWidth)
				{
					if (/msie/.test(navigator.userAgent.toLowerCase()))
					{
						var $textarea1 = $('<textarea cols="10" rows="2"></textarea>').css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
							$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>').css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');

						scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; 
						$textarea1.add($textarea2).remove();

					}
					else
					{
						var $div = $('<div />').css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
											.prependTo('body').append('<div />').find('div')
											.css({ width: '100%', height: 200 });

						scrollbarWidth = 100 - $div.width();
						$div.parent().remove();

					}
				}

				return scrollbarWidth;
			}
		}
		
		//执行方法
		if (methods[method])
		{
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || !method)
		{
			return methods.init.apply(this, arguments);
		}
		else
		{
			$.error('El Método "' +  method + '" No existe en el plugin congelaheaderunocolumn! :( ');
		}
	}
})(jQuery);
2，使用时环境配置还需要css，源码如下： 

 /* 
  		注意Scroll插件的引用使用步骤:
  		1,引用对应的css和js;
  		2,table外层的原有的div按本页面tableScroll样式为准;
  		3,js中在table表格生成之后使用$("#pruebatabla4").CongelarFilaColumna({Columnas:5})代码调用插件中规定的方法 
  */
*{
	margin: 0;
	padding: 0;
	border:0;
}

.header, .main {
    display: inline-block;
    height: auto;
    width: 100%;
}
.titulosHeader {
    border-bottom: 1px solid #e8bb25;
    height: auto;
    margin-bottom: 10px;
    padding-bottom: 8px;
    padding-top: 8px;
    width: 100%;
}
.ContenedorTabla {
	height: 400px;
	margin: 0 auto;
	overflow: auto;
	width: 1024px;
	position: relative;
}
.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
	margin: 0;
}

.fht-table{
	height: auto;
	width: auto;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	border: 0 none;
}

.fht-table th,.fht-table td {
    overflow: hidden;
}

/*.fht-table th,.fht-table td{
	width: 110px;
}*/

.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
	overflow: hidden;
	position: relative;
}

.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
	overflow: auto;
}

.fht-table-wrapper .fht-table .fht-cell {
	overflow: hidden;
	height: 1px;
}

.fht-table-wrapper .fht-fixed-column,
.fht-table-wrapper .fht-fixed-body {
	top: 0;
	left: 0;
	position: absolute;
}

.fht-table-wrapper .fht-fixed-column {
	z-index: 1;
}

.fht-fixed-body .fht-thead table {
	margin-right: 20px;
	border: 0 none;
}
.celda_encabezado_general {
    background-color: #003399;
    border: 1px solid #ccc;
    color: #ffffff;
    font-weight: bold;
    padding: 2px 4px;
    text-align: center;
}
._Separador{
	background-color: #fff;
	height: 12px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 7px;
}
._Separador div{
	width: 4px;
}
.celda_normal {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 2px 4px;
}

/*style excel*/
.excel_cell{
	border: 1px solid #CCC;
	color: #222;
	text-align: center;
	font-size: 13px
	font-weight:  normal;
	padding: 4px;
	white-space: pre-line;
	empty-cells: show;
}
._cell_header{
	background-color: #EEE;
}
._cell_Default{
	background-color: #FFF;
	text-align: left;
}

.excel_cell div{
	width: 30px;
	height: 20px;
}

3，使用步骤见注释，不做重复说明，再有一个注意点，有时候会出现css冲突造成了生成表格混乱的情况，这时候注意调整css引入的顺序，务必将本ScrollTabla.css放在其他css靠后，避免css冲突，demo代码如下： 

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Freeze header and multiple columns</title>

	<link rel="shortcut icon" href="img/logoN.png"/>
	<link href="css/ScrollTabla.css" rel="stylesheet" media="screen" />
</head>
<body>
	<main class="main">
		<div class="ContenedorTabla">
			<table id="pruebatabla" class="fht-table">
				<thead>
					<tr>
						<th class="celda_encabezado_general" rowspan="3">titulo rows</th>
						<th class="celda_encabezado_general" rowspan="3">titulo rows</th>
						<th class="celda_encabezado_general" rowspan="3">titulo rows</th>
						<th class="celda_encabezado_general" rowspan="3">titulo rows</th>
						<th class="celda_encabezado_general" rowspan="3">titulo rows</th>
						<th class="celda_encabezado_general" colspan="6">titulo</th>
						<th class="celda_encabezado_general" colspan="6">titulo</th>
						<th class="celda_encabezado_general" colspan="6">titulo</th>
						<th class="celda_encabezado_general" colspan="6">titulo</th>
					</tr>
					<tr>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
						<th class="celda_encabezado_general" colspan="3">titulo</th>
					</tr>
					<tr>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
						<th class="celda_encabezado_general">titulo</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
					<tr>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
						<td class="celda_normal">dato</td>
					</tr>
				</tbody>
			</table>
		</div>
	</main>
	<footer class=""></footer>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/jquery.CongelarFilaColumna.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#pruebatabla").CongelarFilaColumna({Columnas:3});
		});
	</script>
</body>
</html>

以上。

猜你喜欢

转载自blog.csdn.net/sky_jiangcheng/article/details/78760360
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022