表格-固定列固定行

当一个表格展示的数据相当多的时候，经常会用到固定列，固定行的事情

原理是两个或者多个表格组合行程固定行或者固定列的情况，为了保障样式的统一性

当固定行的时候，要限定宽

当固定列的时候，要限定高

运用的插件 fixed-table.js 以及相关css

例子：

html部分：

<div class="table-scrollable" style="border: 0; overflow: hidden; font-size: 11px;"><p class="t" style="font-size: 18px;font-weight: bolder;color: #666666;margin: 15px 0 25px">待分配人员</p><div class="person-box"><div class="fixed-table-box row-col-fixed layui-form " id="table"><!-- 表头 start --><div class="fixed-table_header-wraper"><table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"><thead><tr><th class="w-80" data-fixed="true"><div class="table-cell">ID</div></th><th class="w-150"><div class="table-cell">邀请单位</div></th><th class="w-100"><div class="table-cell">嘉宾类别</div></th><th class="w-120"><div class="table-cell">嘉宾分类</div></th><th class="w-150"><div class="table-cell">证件上全名</div></th><th class="w-80"><div class="table-cell">性别</div></th><th class="w-150"><div class="table-cell">单位</div></th><th class="w-110" data-fixed="true" data-direction="right"><div class="table-cell">单人入住</div></th><th class="w-110" data-fixed data-direction="right"><div class="table-cell">双人入住</div></th></tr></thead></table></div><!-- 表头 end --><!-- 表格内容 start --><div class="fixed-table_body-wraper"><table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr><tr><td class="w-80" data-fixed="true"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell">邀请单位</div></td><td class="w-100"><div class="table-cell">嘉宾类别</div></td><td class="w-120"><div class="table-cell">嘉宾分类</div></td><td class="w-150"><div class="table-cell">证件上全名</div></td><td class="w-80"><div class="table-cell">性别</div></td><td class="w-150"><div class="table-cell">单位</div></td><td class="w-110" data-fixed="true" data-direction="right"></td><td class="w-110" data-fixed data-direction="right"></td></tr></tbody></table></div><!-- 表格内容 end --><!-- 固定列 start --><div class="fixed-table_fixed fixed-table_fixed-left"><div class="fixed-table_header-wraper"><table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"><thead><tr><th class="w-80"><div class="table-cell">ID</div></th><th class="w-150"><div class="table-cell">邀请单位</div></th><th class="w-100"><div class="table-cell">嘉宾类别</div></th></tr></thead></table></div><div class="fixed-table_body-wraper"><table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"><tbody><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr><tr ><td class="w-80"><div class="table-cell">1</div></td><td class="w-150"><div class="table-cell"> 中青旅</div></td><td class="w-100"><div class="table-cell"> VIP</div></td></tr></tbody></table></div></div><div class="fixed-table_fixed fixed-table_fixed-right"><div class="fixed-table_header-wraper"><table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"><thead><tr><th class="w-110"><div class="table-cell"> <input type="checkbox" id="tablesingle" lay-skin="primary" lay-filter="tablesingle">单人入住</div></th><th class="w-110"><div class="table-cell">  <input type="checkbox" id="tabledouble" lay-skin="primary" lay-filter="tabledouble">双人入住</div></th></tr></thead></table></div><div class="fixed-table_body-wraper"><table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"><tbody><tr data-id="1"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="2"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="3"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="4"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="5"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="6"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="7"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr><tr data-id="8"><td class="w-110"><div class="table-cell"><input type="checkbox" name="tablesingle" lay-skin="primary" lay-filter="singleTrans"></div></td><td class="w-110"><div class="table-cell"><input type="checkbox" name="tabledouble" lay-skin="primary" lay-filter="doubleTrans"></div></td></tr></tbody></table></div></div><!-- 固定列 end --></div></div></div>

View Code

//初始化FixedTable$(".fixed-table-box").fixedTable();

fixed-table.js

;(function (){$.fn.extend({fixedTable: function (){var $this = this;return $this.each(function (index,item){var $this = $(this);if(!$this.hasClass('fixed-table-box')){ return; }if($this.hasClass('head-fixed')){return;}//计算表格的宽度
                $.calFixedTableWidth(item);//计算固定列的高度
                $.calFixedColHeight(item);//同步滚动
                $.syncScroll(item);$this._setFixedIndex();$this.rowHover();});},getRow: function (row){/*根据指定任意地方的行的索引、dom对象、jquery对象获取表格中表格主体、两侧固定列对应的行*/var $this = this,rowDom = undefined,index = undefined,rows = [];if(typeof row != "number"){rowDom = $(row);if(rowDom.length == 0){return;}index = rowDom.index();}else if(typeof row == "number"){index = row;}if(index == undefined){return this;}$this.each(function (index2, item){var $item = $(item),row = {bodyRow: undefined,leftFixedRow: undefined,rightFixedRow: undefined};if(!$item.hasClass('fixed-table-box')){return;}var bodyRows = $item.children('.fixed-table_body-wraper').find("tr"),leftFixed = $item.children('.fixed-table_fixed-left'),rightFixed = $item.children('.fixed-table_fixed-right');row.bodyRow = bodyRows.eq(index);if(leftFixed.length > 0){row.leftFixedRow = leftFixed.children('.fixed-table_body-wraper').find("tr").eq(index);}if(rightFixed.length > 0){row.rightFixedRow = rightFixed.children('.fixed-table_body-wraper').find("tr").eq(index);}rows.push(row);});return rows;},deleteRow: function (row, cb){/*删除行，参数row可以是行的索引、dom对象、jquery对象*/var $this = this;if(row == undefined){return this;}return $this.each(function(index, item) {if(!$(item).hasClass('fixed-table-box')){return;}var $item = $(item),rows = $item.getRow(row);if(!rows || rows.length == 0){return;}$.each(rows, function (index, row){if(row.bodyRow){row.bodyRow.remove();}if(row.leftFixedRow){row.leftFixedRow.remove();}if(row.rightFixedRow){row.rightFixedRow.remove();}$.calFixedColHeight(item);});});},addRow: function (htmlDom, cb){/*添加行，fn必须返回HTML字符串或jQuery对象*/var $this = this,returnVal = undefined,rowDoms = undefined;if(!htmlDom){return this;}if(({}).toString.call(htmlDom) == "[object Function]"){returnVal = htmlDom();}else{returnVal = htmlDom;}if(!returnVal){return this;}rowDoms = $(returnVal);if(rowDoms.length == 0){return this;}return $this.each(function(index, item) {if(!$(item).hasClass('fixed-table-box')){return;}var $item = $(item),$fixedTableBody = $item.children('.fixed-table_body-wraper').find("tbody"),$leftFixed = $item.children('.fixed-table_fixed-left'),$rightFixed = $item.children('.fixed-table_fixed-right');$fixedTableBody.append(rowDoms);if(!item.fixedIndex){return;}//给左侧固定栏添加数据if(item.fixedIndex.left.length > 0 && $leftFixed.length > 0){var cloneRows = rowDoms.clone(true),$leftFixedBody = $leftFixed.children('.fixed-table_body-wraper').find("tbody"),leftTrs = [];                        $.each(item.fixedIndex.left, function (index2, fixedIndex){cloneRows.each(function(index3, cloneRow) {var leftTr = $(this).clone(true).html("");$(cloneRow).find("td").each(function(index4, td) {if(index4 == fixedIndex.index){leftTr.append(td);}});leftTrs.push(leftTr);});});$leftFixedBody.append(leftTrs);}//给右侧固定栏添加数据if(item.fixedIndex.right.length > 0 && $rightFixed.length > 0){var cloneRows = rowDoms.clone(true),$rightFixedBody = $rightFixed.children('.fixed-table_body-wraper').find("tbody"),rightTrs = [];                        $.each(item.fixedIndex.right, function (index2, fixedIndex){cloneRows.each(function(index3, cloneRow) {var rightTr = $(this).clone(true).html("");$(cloneRow).find("td").each(function(index4, td) {if(index4 == fixedIndex.index){rightTr.append(td);}});rightTrs.push(rightTr);});});$rightFixedBody.append(rightTrs);}//添加数据后还需要设置两侧固定列的高度
                $.calFixedColHeight(item);$(item).rowHover();});},emptyTable: function (cb){/*清空表格里的所有内容*/var $this = this;return $this.each(function(index, item) {var $item = $(item);if(!$item.hasClass('fixed-table-box')){return;}var bodyRows = $item.children('.fixed-table_body-wraper'),leftFixed = $item.children('.fixed-table_fixed-left'),rightFixed = $item.children('.fixed-table_fixed-right');bodyRows.find("tbody").html("");leftFixed.find(".fixed-table_body-wraper tbody").html("");rightFixed.find(".fixed-table_body-wraper tbody").html("");$.calFixedColHeight(item);});},rowHover: function (cb){/*鼠标hover在每一行后所处理业务*/var $this = this;return $this.each(function (index, item){if(!$(item).hasClass('fixed-table-box')){return;}var $item = $(item),hoverClass = $item.attr("data-hover") || "rowHover",$fixedTableBodyTrs = $item.children('.fixed-table_body-wraper').find("tr"),$leftFixed = $item.children('.fixed-table_fixed-left'),$rightFixed = $item.children('.fixed-table_fixed-right');//为 避免多次绑定，在绑定事件前先将之前绑定的事件移除掉$fixedTableBodyTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");$fixedTableBodyTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);if($leftFixed.length > 0){var $leftFixedTrs = $leftFixed.children('.fixed-table_body-wraper').find("tr");$leftFixedTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");$leftFixedTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);}if($rightFixed.length > 0){var $rightFixedTrs = $rightFixed.children('.fixed-table_body-wraper').find("tr");$rightFixedTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");$rightFixedTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);}});function _process(){var $this = $(this),fixedTableBox = $this.parents(".fixed-table-box"),hoverClass = fixedTableBox.attr("data-hover") || "rowHover",rows = fixedTableBox.getRow($this.index());if(!rows || rows.length == 0){return;}$.each(rows, function(index, row) {row.bodyRow.toggleClass(hoverClass);if(row.leftFixedRow){row.leftFixedRow.toggleClass(hoverClass);    }if(row.rightFixedRow){row.rightFixedRow.toggleClass(hoverClass);}});}},_setFixedIndex: function (){/*存储固定列的下标*/return this.each(function (){var that = this,$this = $(this),$fixedTableHeaderTd = $this.children('.fixed-table_header-wraper').find('th');if(this.fixedIndex){return;}/*固定列的下标，数组的内容必须是一个对象，且对象格式为{index: 0,//下标direction: "left"//固定列方向}*/this.fixedIndex = {};$fixedTableHeaderTd.each(function(index, th) {if(th.hasAttribute("data-fixed")){var direction = ($(th).attr("data-direction") || "left").toLowerCase();if(!that.fixedIndex.left){that.fixedIndex.left = [];}if(!that.fixedIndex.right){that.fixedIndex.right = [];}that.fixedIndex[direction].push({index: index,direction: direction});}});}); }});$.extend({calFixedColHeight: function (fixedTableBox){/*计算两侧固定列的高度，及右侧固定列的位置*/if(!$(fixedTableBox).hasClass('fixed-table-box')){return this;}var $fixedTableBox = $(fixedTableBox),$fixedTableHeader = $fixedTableBox.children('.fixed-table_header-wraper'),$fixedTableBody = $fixedTableBox.children(".fixed-table_body-wraper"),fixedTableBody = $fixedTableBody[0],$fixedTableLeft = $(".fixed-table_fixed-left"),$fixedTableRight = $(".fixed-table_fixed-right"),hasCrosswiseScroll = true,//用于判断固定列的高度是否要减去滚动条的宽度，这样才不会遮住水平滚动条hasVerticalScroll = false,//用于判断右侧的固定列的right值是否需要加上滚动条的宽度，这样才能显示出垂直滚动条scrollWidth = 0,scrollWidth2 = 0,maxHeight = 0,isIE = $.isIE();if(isIE){//IE浏览器/*在IE浏览器中$fixedTableBox.height()、$fixedTableBox[0].offsetHeight获取的高度都为0，不知道为什么，但$fixedTableBox[0].clientHeight和$fixedTableBox[0].scrollHeight都有值，为了保证两边的固定列能出来，所以就使用了这种解决方案*/maxHeight = $fixedTableBox.height() || $fixedTableBox[0].clientHeight || $fixedTableBox[0].scrollHeight;}else{maxHeight = $fixedTableBox.height();}if(fixedTableBody.scrollWidth > fixedTableBody.clientWidth || fixedTableBody.offsetWidth > fixedTableBody.clientWidth){hasCrosswiseScroll = true;}else{hasCrosswiseScroll = false;}/*如果有水平滚动条fixedTableBody.offsetHeight会把水平滚动条的高度也计算进去，因此这里需要减去水平滚动条的高度*/if(fixedTableBody.scrollHeight > fixedTableBody.clientHeight || (fixedTableBody.offsetHeight - $.getScrollWidth()) > fixedTableBody.clientHeight){hasVerticalScroll = true;}else{hasVerticalScroll = false;}if(hasCrosswiseScroll){scrollWidth = $.getScrollWidth();}if(hasVerticalScroll){scrollWidth2 = $.getScrollWidth();if($fixedTableBox.find(".fixed-table-box_fixed-right-patch").length == 0){var rightPatch = $('<div class="fixed-table-box_fixed-right-patch"></div>'),height = $fixedTableHeader.height();rightPatch.css({width: scrollWidth2,height: height-2});$fixedTableBox.append(rightPatch);}}else{if($fixedTableBox.find(".fixed-table-box_fixed-right-patch").length == 0){$fixedTableBox.find(".fixed-table-box_fixed-right-patch").remove();}}var height = maxHeight - scrollWidth,fixedTable = $fixedTableBox.find(".fixed-table_fixed");if(fixedTable.height() != Math.abs(maxHeight - scrollWidth)){var height = maxHeight - scrollWidth;fixedTable.height(maxHeight - scrollWidth);}$fixedTableBox.find(".fixed-table_fixed.fixed-table_fixed-right").css("right", (scrollWidth2-1) < 0 ? 1 : (scrollWidth2 - 1));return $fixedTableBox;},calFixedTableWidth: function (fixedTableBox){/*计算表格的宽度*/if(!$(fixedTableBox).hasClass('fixed-table-box')){return this;}var $this = $(fixedTableBox),$body = $("body"),$fixedTableHeader = $this.children().children(".fixed-table_header"),$fixedTableBody = $this.children().children(".fixed-table_body"),$cloneNode = $fixedTableHeader.clone(true),width = 0;$cloneNode.css({position: "fixed",top: "-1000px"});$body.append($cloneNode);width = $cloneNode.width();$fixedTableHeader.width(width);$fixedTableBody.width(width);$cloneNode.remove();return this;},syncScroll: function (fixedTableBox){/*同步滚动*/if(!$(fixedTableBox).hasClass('fixed-table-box')){return this;}var $fixedTableBox = $(fixedTableBox),fixedTableHeader = $fixedTableBox.children(".fixed-table_header-wraper"),$fixedTableBody = $fixedTableBox.children('.fixed-table_body-wraper'),$fixedCols = $fixedTableBox.children('.fixed-table_fixed').children('.fixed-table_body-wraper');$fixedTableBody.on("scroll", function (){var $this = $(this);fixedTableHeader.scrollLeft($this.scrollLeft());$fixedCols.scrollTop($this.scrollTop());});return this;},getScrollWidth: function (){/*获取元素或浏览器滚动条的宽度*/var div = document.createElement("div"),w1 = 0,w2 = 0;document.body.appendChild(div);div.style.position = "fixed";div.style.left = "-2000px";div.style.width = "200px";div.style.height = "200px";w1 = div.clientWidth;div.style.overflow = "scroll";w2 = div.clientWidth;document.body.removeChild(div);return w1-w2;},isIE: function (){/*判断浏览器是否为IE浏览器*/var ua = navigator.userAgent.toLowerCase();if(/msie \d/g.test(ua) || ((/trident\/\d/g.test(ua)) && /like gecko/g.test(ua))){return true;}else{return false;}}});})();

View Code

fixed-table.css

@charset "utf-8";body{margin: 0;padding: 0;
}
.fixed-table-box table {border-spacing: 0;border-collapse: collapse;box-sizing: border-box;
}
.fixed-table-box tr,
.fixed-table-box td,
.fixed-table-box th {box-sizing: border-box;
}.fixed-table-box{position: relative;font-size: 14px;line-height: 1.42858;border: 1px solid #dfe6ec;border-bottom: 0;border-right: 0;overflow: hidden;
}
.fixed-table-box:before{display: block;position: absolute;bottom: 0;left: 0;content: " ";width: 100%;height: 1px;background-color: #dfe6ec;
}
.fixed-table-box:after{display: block;position: absolute;top: 0;right: 0;content: " ";width: 1px;height: 100%;background-color: #dfe6ec;
}
.fixed-table-box .fixed-table_header,
.fixed-table-box .fixed-table_body{width: auto;
}
.fixed-table-box table{background-color: #fff;border: 0;
}
.fixed-table-box th,
.fixed-table-box td{position: relative;text-align: left;padding: 5px 0;border: 1px solid #dfe6ec;
}
.fixed-table-box .table-cell{display: block;height: 30px;line-height: 30px;word-break: break-all;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 15px;
}
/* 表头 start */
.fixed-table-box>.fixed-table_header-wraper{overflow: hidden;
}
.fixed-table-box .fixed-table_header.fixed-header{position: absolute;top: 0;left: 0;width: 100%;
}
.fixed-table-box .fixed-table_header tr{background-color: #eef1f6;
}
.fixed-table-box .fixed-table_header th{color: #1f2d3d;border-top: 0;border-left: 0;
}
/* 表头 end *//*表格内容 start*/
.fixed-table-box .fixed-table_body td{border-top: 0;border-left: 0;
}
.fixed-table-box .fixed-table_body tr.rowHover{background-color: #eef1f6;
}
/*表格内容 end*//* 行固定表格 start*/
.fixed-table-box.head-fixed .fixed-table_body-wraper{overflow-y: auto;
}
.fixed-table-box.head-fixed .fixed-table_header,
.fixed-table-box.head-fixed .fixed-table_body{width: 100%;
}
/* 行固定表格 end*//* 列固定表格 start */
.fixed-table-box.col-fixed{/* overflow-x: auto; */border-right: 1px solid #eef1f6;
}
.fixed-table-box.col-fixed:after{display: none;
}
.fixed-table-box.col-fixed .fixed-table_header-wraper{/*设置它为overflow: hidden的目的是为了在拖动.fixed-table-box.col-fixed .fixed-table_body-wraper的时候可以同步的拖动.fixed-table-box.col-fixed .fixed-table_header-wraper*/overflow: hidden;
}
.fixed-table-box.col-fixed .fixed-table_body-wraper{overflow-x: auto;
}
/* 列固定表格 end *//* 固定列 start */
.fixed-table_fixed{position: absolute;top: 0;z-index: 5;background-color: #fff;overflow: hidden;
}
.fixed-table_fixed-left{left: 0;box-shadow: 1px -1px 8px 1px #d3d4d6;
}
.fixed-table_fixed-right{right: 0;/* border-left: 1px solid #dfe6ec\0; */box-shadow: -2px -1px 8px 1px #d3d4d6;
}
.fixed-table_fixed .fixed-table_header-wraper,
.fixed-table_fixed .fixed-table_body-wraper{overflow-y: hidden;
}
.fixed-table_fixed.fixed-table_fixed-right td{border-right: none;border-left: 1px solid #dfe6ec;
}
/* 固定列 end *//* 固定列和固定表头 start */
.fixed-table-box.row-col-fixed>.fixed-table_body-wraper{overflow: auto;
}.fixed-table-box_fixed-right-patch{/*右上角的遮罩，如果少了这块在右边有固定列并且表格内容右侧有滚动条时会出现镂空的效果*/background-color: #eef1f6;position: absolute;top: 0;right: 0;
}
/* 固定列和固定表头 end */

View Code

页面内样式：

 /*固定列*/.fixed-table-box{max-width: 1200px;min-width: 1010px;/*margin: 50px auto;*/}.fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/max-height: 260px;/*margin-right: -12px;*/}.fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/max-height: 240px;}.fixed-table-box  td{height: 37px!important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.w-150{width: 150px;}.w-120{width: 120px;}.w-300{width: 300px;}.w-100{width: 100px;}.w-110{width: 110px;}.w-80{width: 80px;}.btns{text-align: center;}.btns button{padding: 10px 20px;}.fixed-table_body-wraper::-webkit-scrollbar {/*滚动条整体样式*/width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/height: 12px;}.fixed-table_body-wraper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}.fixed-table_body-wraper::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);}

View Code

这里有一个样式注意点

有的浏览器 td 不会按照规定的宽度展示，可以在里面的table-cell 加上宽度类名防止样式跑版

table-cell的话 一定要box-sizing:border-box;word-break: break-all;white-space:nowarp;overflow:hidden;text-overflow:ellipsis;

 <td class="w-150"><div class="table-cell w-150">邀请单位</div></td>

转载于:https://www.cnblogs.com/GoTing/p/11534051.html

表格-固定列固定行相关推荐

计算机做表格的行高和列宽,表格中列和行的插入与删除及行高和列宽的调整——想象力电脑应用...
大多数数据输入到工作表后都需要进行管理和格式设置,以获得更好的显示效果,也便于分辨各类型的数据.这里我们将介绍行或列的插入与删除和行高和列宽的调整. 一.行或列的插入与删除在输入数据时,如果遗漏了某 ...
使用antd表格固定列后行与行之间对不齐
在公司写项目时用了antd的表格固定列,发现固定的列与没有固定的列对不齐在css里加上这段,高度调整到跟未固定列一致即可. >>>.ant-table-thead tr{heigh ...
elementui表格固定列之后行错位解决
项目场景 elementui表格在使用的固定列之后,当出现滚动条时,滚动到最后一条数据会发现对不齐. 解决方案: /** *offset //对齐的高度 **/ function elementFix ...
fixedColumns.js固定列，行对不齐
昨天使用的DataTable的fixedColumns.js固定最后一列 http://t.csdn.cn/sUPGp 发生bug,列对不齐,这个样子首列固定完全对齐尾列固定对不齐我这是行没对齐 ...
计算机表格有多少列多少行,『Excle 2016最大行』Excel2016一张工作表包含多少行，多少列，多少单元格...
电脑装上了2019版EXCEL,最大承受行数竟然只有65536行,为什么你的是xls格式吧 excel2016抢鲜版最多多少行 excel2016抢鲜版最多多少行 1.文件的后为*.xls,那么多就 ...
使用python计算excel表格A列有多少行
你可以使用 Python 中的库如 pandas 来读取 Excel 文件并计算其中某一列的行数. 以下是一个简单的例子: import pandas as pd# 读取 Excel 文件 df = ...
table表格首列首行固定
本方法对于复杂类型的表表头同样适用,对于那些并行并列的(colspan或者rowspan),不过需要在表格创建后自己额外修改自动生成表格第一步引入js //可以去这里下载自己重新创建一个,还需要引用 ...
不固定列动态行转列SQL
行转列在sql的应用中比较常用,但现在互联网数据应用中,往往获取的都是json,而且里面的字段解析出来后列都是不固定的,多的话几百个字段都不出奇,经常我们要根据这些字段进行汇总,就涉及到了动态行转列的 ...
dataTable固定列固定行
直接贴代码引入样式文件 <link type="text/css" href="css/fixedColumns.bootstrap.css" /> ...

表格-固定列固定行

表格-固定列固定行相关推荐

最新文章

热门文章

表格-固定列 固定行

表格-固定列 固定行相关推荐

最新文章

热门文章

表格-固定列固定行

表格-固定列固定行相关推荐