锁定表头和固定列(Fixed table head and columns)

最新推荐文章于 2021-08-13 17:42:02 发布
最新推荐文章于 2021-08-13 17:42:02 发布
阅读量479 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
版权

前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。

如使用jQuery1.9.x及以上版本，需要引用jQuery Migrate Plugin库，在jQuery官网即可下载到!

因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。

支持IE6+，FF3.6+，Opera9+，Chrome9+

一、实现方式

这里的准备使用4个table实现，具体如下图：

image

上图红色部分为要取出来的部分，蓝色部分为拼接后可以看到的部分。最终结果如下图

image

实现后效果：

姓名班级成绩
主科文科理科总分
语文数学英语政治历史地理物理化学生物
学生1班级364 104 150 93 32 82 26 44 83 678 
学生2班级2120 66 150 85 5 50 72 32 90 670 
学生3班级2133 61 49 97 67 13 64 8 60 552 
学生4班级37 136 105 86 56 11 98 29 18 546 
学生5班级2129 146 62 64 67 1 70 57 16 612 
学生6班级245 29 51 91 9 2 37 3 26 293 
学生7班级128 25 127 96 43 90 75 13 28 525 
学生8班级378 64 20 29 70 92 100 69 30 552 
学生9班级265 10 139 19 57 86 57 79 76 588 
学生10班级2113 142 4 100 41 69 12 45 20 546 
学生11班级341 84 42 23 89 88 6 4 21 398 
学生12班级14 102 111 61 76 12 25 66 39 496 
学生13班级249 144 56 75 18 58 39 13 88 540 
学生14班级1119 81 73 53 37 88 79 69 30 629 
学生15班级3120 78 86 58 50 7 20 42 24 485 
学生16班级165 71 9 64 45 31 18 53 5 361 
学生17班级172 139 24 20 39 49 19 21 23 406 
学生18班级350 84 53 70 77 81 38 80 25 558 
学生19班级156 147 134 59 57 31 48 86 7 625 
学生20班级1103 38 96 100 21 88 36 37 18 537 
学生21班级1133 150 28 37 96 88 12 36 87 667 
学生22班级2140 59 42 95 94 50 3 58 63 604 
学生23班级12 51 19 17 19 7 93 35 49 292 
学生24班级367 2 91 23 22 37 79 52 63 436 
学生25班级329 17 149 44 13 29 98 70 6 455 
学生26班级3126 117 112 11 100 55 87 1 18 627 
学生27班级3144 115 131 97 19 92 79 4 72 753 
学生28班级2107 77 143 94 89 90 35 70 3 708 
学生29班级314 33 44 78 5 67 27 49 23 340 
学生30班级377 117 51 75 74 43 25 2 24 488 
学生31班级176 140 148 50 100 33 83 81 23 734 
学生32班级129 25 146 28 79 73 47 8 91 526 
学生33班级296 44 121 3 4 94 17 20 19 418 
学生34班级297 48 68 82 39 16 24 79 79 532 
学生35班级3126 69 40 13 48 34 81 5 97 513 
学生36班级1144 24 18 71 58 21 12 95 45 488 
学生37班级123 94 93 78 46 88 72 15 90 599 
学生38班级273 103 45 17 69 18 3 67 55 450 
学生39班级319 16 36 18 50 48 19 75 24 305 
学生40班级16 44 50 73 58 21 84 49 68 453 
学生41班级294 98 24 34 52 27 87 95 1 512 
学生42班级227 68 60 75 93 4 38 44 27 436 
学生43班级3102 146 138 72 58 19 34 57 60 686 
学生44班级251 81 150 95 8 48 96 90 66 685 
学生45班级193 37 109 84 100 59 90 59 81 712 
学生46班级2125 60 32 70 93 65 74 44 77 640 
学生47班级1139 45 52 54 6 64 46 45 66 517 
学生48班级214 73 118 4 36 43 24 8 73 393 
学生49班级345 114 114 6 65 94 32 30 1 501 
学生50班级2112 77 19 33 30 32 90 18 77 488 
学生51班级219 66 140 36 44 34 62 17 34 452 
学生52班级261 98 107 78 2 17 54 28 89 534 
学生53班级148 23 65 23 70 58 36 45 75 443 
学生54班级181 9 46 37 86 87 83 39 63 531 
学生55班级148 23 145 53 2 9 80 35 31 426 
学生56班级1117 92 44 65 3 98 0 70 67 556 
学生57班级3148 25 63 29 96 34 34 34 92 555 
学生58班级151 22 97 58 80 16 19 91 20 454 
学生59班级2118 1 20 62 26 93 77 66 34 497 
学生60班级3129 19 109 78 33 15 74 67 58 582 
学生61班级3112 68 65 15 79 63 97 72 85 656 
学生62班级3117 14 73 6 6 98 3 81 2 400 
学生63班级187 103 0 2 30 21 43 87 25 398 
学生64班级265 79 49 53 86 33 57 99 83 604 
学生65班级2144 7 122 47 11 76 64 66 71 608 
学生66班级218 140 96 54 10 6 45 41 85 495 
学生67班级230 14 70 20 44 25 77 97 20 397 
学生68班级360 7 147 38 7 53 88 54 92 546 
学生69班级286 115 23 90 52 50 89 79 42 626 
学生70班级3132 25 21 25 44 86 58 61 3 455 
学生71班级3149 102 68 98 96 7 95 25 47 687 
学生72班级228 138 74 30 0 43 95 57 68 533 
学生73班级354 148 81 40 86 23 91 73 95 691 
学生74班级1143 39 76 5 55 90 31 18 95 552 
学生75班级283 95 48 86 61 97 68 84 24 646 
学生76班级1138 1 141 9 50 1 14 5 11 370 
学生77班级325 33 46 25 62 93 41 43 75 443 
学生78班级118 114 93 22 38 73 66 69 79 572 
学生79班级384 10 72 94 30 95 32 41 56 514 
学生80班级2113 39 10 23 28 33 32 7 23 308 
学生81班级383 36 13 13 89 15 39 71 72 431 
学生82班级352 68 39 22 16 9 75 37 95 413 
学生83班级390 0 132 20 36 86 69 39 95 567 
学生84班级161 89 67 10 33 31 99 34 4 428 
学生85班级183 93 105 79 19 30 0 84 7 500 
学生86班级188 143 19 56 9 56 36 89 77 573 
学生87班级170 0 115 66 36 76 0 16 89 468 
学生88班级317 60 49 80 12 99 30 8 1 356 
学生89班级1129 128 48 76 47 46 46 89 1 610 
学生90班级3143 14 86 1 69 55 85 3 43 499 
学生91班级244 127 143 22 7 18 62 33 44 500 
学生92班级137 41 130 71 17 61 68 1 19 445 
学生93班级345 17 22 10 90 1 83 31 11 310 
学生94班级219 40 99 59 77 1 90 9 68 462 
学生95班级1126 19 68 91 53 68 23 87 85 620 
学生96班级1131 126 126 53 13 18 70 85 33 655 
学生97班级153 47 33 87 98 98 62 28 95 601 
学生98班级1107 88 49 91 6 17 66 24 58 506 
学生99班级1118 145 69 4 70 29 43 13 45 536 
学生100班级248 8 115 63 93 53 91 59 93 623 

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层，命名为tableColumn。

3、用上部的table覆盖在更上层，命名为tableHead。

4、在左上角覆盖固定不动的table，命名为tableFix。

自然在各自的外层都要用div框起来，以便后面的浮动和覆盖等等，所以结构的html如下：

<div id="MyTable_tableLayout"> <div id="MyTable_tableFix"> <table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableHead"> <table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableColumn"> <table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table> </div> <div id="MyTable_tableData"> <table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table> </div> </div>

三、代码实现

整体框架结构出来后，下面要做的就是确定每个区域的高度，宽度，定位就算完成了。

首先确定下调用接口，调用时已经有table了，我们希望很简单的一行js即可高定，就用了一个方法实现。由于使用项目中table线宽全部都是1，所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数：table的ID，第二个参数：要锁定的列数目，第三个参数：显示的宽度，第四个参数：显示的高度。

（一）首先创建上面所诉的框架出来：

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"); });

（二）计算tableFix，tableHead的高度：

var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID + "_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight);

（三）计算tableFix，tableColumn的宽度：

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);

（四）为tableHead和tableColumn添加联动的滚动条事件：

$("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); });

（五）为较小的table修正样式：

if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableHead 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").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" }); $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

 

四、代码如下

 

完整代码如下:

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());
}

ps:之前的代码有点bug，在高度不够的时候定位会产生错误，在此修正了。

ps2:代码中使用了jquery的msie方法，此方法在1.9.x中删除，需要添加jQuery Migrate Plugin引用，在jQuery官网即可下载到。

ps3：代码在本页中就有，请需要代码的自行右键查看源代码查看即可。

ps4：效果也在本页有示例。

ps5：请阅读完毕后，还有问题，请发消息。

ps6：本人现在上此博客偏少，回复时间过长请见谅。

 

转载于:https://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

weixin_30306905
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery 锁定表头和固定列(Fixed table head and columns)
11-27
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 来源： http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
Bootstrap Table Fixed Columns 固定列
04-02
bootstrap 固定列需要引用的js和css，同时里面含有一个简单的例子
bootstrap-table-fixed-columns-master.zip
05-13
bootstrap-table样式固定列js插件，在网上看到下载资源比较少，免费提供给大家下载使用，方便开发进度。
Sharepoint2010之父子表实现
weixin_30252155的博客
08-28 103
在Sharepoint的实际运用中会经常使用到父子表来建立2个表之间的关系。通常父表为表头，存储公共的数据项目，子表存储细分的项目。 例如通过下面2个表实现图书借阅功能，表1为图书的基础信息，表2为图书的借阅记录，采用查阅字段调用表一的图书数据。 1、先建一个自定表，字段如表1所示。 表1图书表...
MFC CListCtrl 锁定表头的方法
duoerbasilu
07-09 188
群里有朋友问锁定表头这个怎么实现，就顺便写一下吧。 解决此问题的思路： 　　子类化CHeaderCtrl，处理由父窗口反射的HDN_BEGINTRACK消息，实际上这个消息有ASCII版本和UNICODE版本，所以这里就要对HDN_BEGINTRACKA和HDN_BEGINTRACKW都进行处理。处理这个消息是为了实现锁定表头，另外为了更加完善，也要将光标修改成默认的箭头。...
MFC-ListCtrl(列表控件)
_ACME_的博客
03-25 3395
效果如图: Icon Small Icon List Report 首先要在初始化对话框中设置ListCtrl的表头,正常图标,小图标 表头设置如下: //获取指向列表控件的指针 CListCtrl* pLc = (CListCtrl*)GetDlgItem(IDC_LIST); //改变视图为详细信息(report) pLc->ModifySt
MFC LIstCtrl控件表头（分割）重新绘制
SELECT_destiny的博客
08-13 3720
MFC的原始列表的的表头只支持单行输入的，对表头重绘后可以按自己需要进行绘制；效果图如下; 具体操作步骤如下: 1. 分别派生CHeaderCtrl与CListCtrl类；我这里写的类名是CMyHeadCtrl与CMyListCtrl；以下为CMyHeadCtrl与CMyListCtrl的代码： 具体下载链接（此下载链接不用C币，个人觉得现在的资源越来越贵了，已经下载不起，这个资源就共享吧）： https://download.csdn.net/download/SELECT_destiny/210
ListCtrl 控件表头多行显示
weixin_45785927的博客
11-28 1571
使用MFC自带的控件listCtrl, 有时候发现表头太长了，想显示多行，网上找了很久，发现就那两个原创转过来转过去，关键还解决不了问题。本人菜鸡一个，也看不太懂，稀里糊涂的。 最后实现该功能。望大神门，多发原创的帖子，共同学习。 1、首先派生一个列表头(CHeaderCtrl)的类CHeaderCtrlEx，在重载虚函数drawItem函数中 void CHeaderCtrlEx::D...
fixed-columns
06-02
fixed-columns表格固定列。
bootstrap-table-fixed-columns v1.22.3
最新发布
03-13
升级该版本，彻底解决bootstrap-table-fixed-columns固定列后行对不齐问题，解决列头和内容不对齐问题
bootstrap-table-fixed-columns.js
07-15
如有使用疑问，联系本人
bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行
03-05
在原bootstrap-table-fixed-columns的基础上，解决了冻结列后，排序失效、列宽错位和合并行失效问题
bootstrap-table-fixed-columns(css,js)
05-06
如有使用疑问，联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
bootstrap-table-fixed-columns.zip
01-14
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
react-table-hoc-fixed-columns:固定列的ReactTable HOC
05-06
table-hoc-fixed-columns --save 简单的例子这非常简单：将fixed属性添加到您的列中，其值分别为left和right import ReactTable from 'react-table' ;import "react-table/react-table.css" ;im
bootstrap-table-fixed-columns.css
10-09
bootstrap-table-fixed-columns.css是Bootstrap框架中的一个CSS样式文件，它用于实现表格列固定的效果。 当我们在页面中使用bootstrap-table插件来展示包含大量数据的表格时，通常会遇到以下问题：表格宽度超出了屏幕宽度，导致用户需要水平滚动才能看到所有列的内容；同时，当用户滚动表格时，表头的列名无法固定在页面顶部，造成了不便。 bootstrap-table-fixed-columns.css通过添加一些样式规则来解决以上问题。首先，它会为表格添加一个水平滚动条，使得用户可以通过滚动来查看所有内容。其次，它会将表头固定在页面顶部，使得用户在滚动时可以始终看到列名，方便明确每一列的含义。 具体实现的原理是采用了CSS中的position:fixed属性，通过将表头设置为固定定位，使其始终停留在页面顶部。同时，该样式文件还对表格的宽度进行了调整，使得表格不会超出页面宽度，而是自动适应屏幕大小。 使用bootstrap-table-fixed-columns.css可以极大地提升表格的展示效果，使得用户在查阅大量数据时拥有更好的体验。这个样式文件是Bootstrap框架中非常实用的一个组件，帮助我们解决了表格宽度超出屏幕和表头列名不固定的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值