表格里的第一行怎么固定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格里的第一行怎么固定相关的知识，希望对你有一定的参考价值。
不知道怎么把excel表格的第一行固定置顶，或者下拉时第一行不会被隐藏，这样我们就能对应表格第一行各单元格的属性了，下面就教你快速设置方法。1、打开你的excel表格文档，首先需要鼠标移动选定第一行下的单元格，即第二行的随便一个单元格就可以了。
2、然后鼠标移动到excel表格菜单栏下，点击菜单栏下的“窗口”菜单。
3、点击菜单后就会出现下拉选项，选择点击“冻结窗格”。
4、这样excel表格第一行就固定了，冻结窗格也会把选定单元格左侧的列冻结，如果不想要，那么选定的那个单元格必须是第二行第一列的那个单元格。
5、冻结窗格后，就可以看到表格中会出现一条明显的分割线了。
总结：
1.我们首先在电脑上打开excel表格。
2.然后选中文件中第一行行的内容。
3.点击上方菜单栏中的视图选项。
4.找到冻结窗格选项并点击。
5.在下拉菜单中点击冻结首行。
6.这样我们的第一行就固定了。 参考技术A 视图一一冻结窗格一一冻结首行
表格列固定
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>类似excel的滚动机制，当移动滚动条时固定table的第一行和第一列</title>
<style type="text/css">
#table-container{width:650px;height:250px;overflow: auto;margin: 50px;border: 1px solid #DDD;}
#table-container table{width: 100%;border-width: 0;border-collapse: collapse;}
#table-container table td{padding: 0;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #FFF;}
#table-container .table-top td, #table-container .table-lt td, #table-container .table-left td{background: green;}
#table-container .table-top td:last-child{border-right: 0px solid #DDD;}
#table-container .table-right td:last-child{border-right: 0px solid #DDD;}
#table-container .table-right tr:last-child td{border-bottom: 0px solid #DDD;}
#table-container .table-left tr:last-child td{border-bottom: 0px solid #DDD;}
#table-container td div{display: inline-block;max-width: 200px;margin:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;line-height: 24px;}
#table-container .table-lt{position: fixed;z-index:3;}
#table-container .table-top{position: fixed;overflow:hidden;z-index:2;}
#table-container .table-left{position: fixed;overflow:hidden;z-index:2;}
#table-container .table-right{position: relative;z-index:1;}
#table-container .table-mask{position: relative;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<div id="table-container">
<div class="table-lt">
<table>
<tbody>
<tr>
<td>
<div>
header-left-top
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-top">
<div class="table-mask">
<table>
<tbody>
<tr>
<td>
<div>topTitle1</div>
</td>
<td>
<div>topTitle2</div>
</td>
<td>
<div>topTitle3</div>
</td>
<td>
<div>topTitle4</div>
</td>
<td>
<div>topTitle5</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table-left">
<div class="table-mask">
<table>
<tbody>
<tr>
<td>
<div>leftTitle1</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle2</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle3</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle4</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle5</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle6</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle7</div>
</td>
</tr>
<tr>
<td>
<div>leftTitle8</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="table-right">
<table>
<tbody>
<tr>
<td>
<div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouioud</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
<tr>
<td>
<div>uoiuiuiouiou</div>
</td>
<td>
<div>uoifdfdfuiuiouiou</div>
</td>
<td>
<div>uoiuiufdiouiou</div>
</td>
<td>
<div>uoiuiufdsfsdfiouiou</div>
</td>
<td>
<div>uoiuiusiouiou</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(argument) {
var container = $("#table-container"),
ltTable = container.find(".table-lt"),
topTable = container.find(".table-top"),
leftTable = container.find(".table-left"),
rightTable = container.find(".table-right"),
containerWidth = 0,
containerHeight =0,
ltTableWidth = 0,
ltTableHeight = 0,
widthJson = {},
timerLT = null;
ltTableWidth = ltTable.width();
ltTable.width(ltTableWidth);
topTable.css("marginLeft",ltTableWidth);
leftTable.width(ltTableWidth);
rightTable.css("marginLeft",ltTableWidth);
ltTableHeight = ltTable.height();
leftTable.css("marginTop",ltTableHeight+"px");
rightTable.css("marginTop",ltTableHeight+"px");
containerHeight = container.height();
containerWidth = container.width();
topTable.width(containerWidth - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
leftTable.height(containerHeight - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
// figure out the width of each DIV in TD --start
function setDivWidth(obj){
$(obj).find("div").each(function(index){
if(!widthJson[index]){
widthJson[index] = 0;
}
if(widthJson[index]<$(this).width()) {
widthJson[index] = $(this).width();
}
});
}
topTable.find("tr").each(function(){
setDivWidth(this);
});
rightTable.find("tr").each(function(){
setDivWidth(this);
});
topTable.find("tr:first div").each(function(index){
$(this).width(widthJson[index]);
});
rightTable.find("tr:first div").each(function(index){
$(this).width(widthJson[index]);
});
// figure out the width of each DIV in TD --end
container.scroll(function(){
var currentScrollTop = $(this).scrollTop(),
currentScrollLeft = $(this).scrollLeft();
topTable.find(".table-mask").css("left", -currentScrollLeft+"px");
leftTable.find(".table-mask").css("top", -currentScrollTop+"px");
});
$(document).scroll(function(){
var currentScrollTop = $(this).scrollTop(),
currentScrollLeft = $(this).scrollLeft();
ltTable.css("marginTop", -currentScrollTop+"px");
ltTable.css("marginLeft", -currentScrollLeft+"px");
topTable.css("marginTop", -currentScrollTop+"px");
topTable.css("marginLeft", ltTableWidth - currentScrollLeft+"px");
leftTable.css("marginTop", ltTableHeight - currentScrollTop+"px");
leftTable.css("marginLeft", -currentScrollLeft+"px");
});
// for IE, when window‘s scrollbar is moved, keep ltTable,leftTable,topTable in the correct position
$(window).resize(function(){
$(document).scroll();
});
//reset the width of topTable and the height of leftTable when container‘s size is changed, if container‘s size is fixed, you can skip the code below.
timerLT = setInterval(function(){
if(containerWidth != container.width() || containerHeight != container.height()){
topTable.width(container.width() - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
leftTable.height(container.height() - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
containerWidth = container.width();
containerHeight = container.height();
container.scroll();// for IE
};
},0);
});
</script>
</body>
</html>
以上是关于表格里的第一行怎么固定的主要内容，如果未能解决你的问题，请参考以下文章