table 表头永远置顶

以下仅供参考！不对的评论下指正！

table貌似无论怎么设置td 高度table都会根据数据的变化而变化（宽度table-layout:fixed样式可以做到固定）高度而且当数据少的时候高度会平分table高度导致页面不好看whenload方法是用来解决当数据少的时候设置table高度使得界面不会难看！

现在table头不动的解决方式是使用2个table 一个用来显示我们需要看到的表头table1 一个用来显示表体table2，他们用用同样的宽度表体装载在一个稍大于表体宽度的div2下（宽度自己看着设置）表头table1和div1装载在相同的父标签div下

为了使得table1和table2显示宽度上能平齐用空白占位符占用了table2对应th区域。对应的th用占用相等空间的占位符占用。

以下有空格占位符的案例（都是百度的）

  == 普通的英文半角空格

  ==   ==   == no-break space （普通的英文半角空格但不换行）

　 == 中文全角空格（一个中文宽度）

  == &ensp; == en空格（半个中文宽度）

  == &emsp; == em空格（一个中文宽度）

  == 四分之一em空格（四分之一中文宽度）

相比平时的空格（ ），nbsp拥有不间断（non-breaking）特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp，浏览器也不会把它们拆成两行。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.rendDivices,.CheckHis {
	border: 1px solid #C1C1C1;
}
th {
	height: 10px;
}
td {
    word-wrap:break-word;
    width: 11%;
	text-align: left;
	height: 10px;
}
tr{

max-height:10px;
}

</style>
<script  type="text/javascript">
function whenLoad(){
var table = document.getElementById("checkShowTable");
var cel=table.children[0].children;
if(cel.length<20){
table.style.height=cel.length*20+"px";
var sss=0;
}
}
</script>
<title>test</title>
</head>
<body onload="whenLoad()">
<div >
		<div style="margin: auto; boder: 3px solid red; width: 800px;height:600px;">
			<table id="checkShowTableHead" class="rendDivices"
				style="margin-top: 10px;width:100%;table-layout:fixed">
				<tr>
					<th class="rendDivices thnc">请问</th>
					<th class="rendDivices thnc">去问人体有</th>
					<th class="rendDivices thnc">去问人体</th>
					<th class="rendDivices thnc">阿斯蒂芬</th>
					<th class="rendDivices thnc">自行车v不</th>
					<th class="rendDivices thnc">人推哦地方</th>
					<th class="rendDivices thnc">阿斯蒂芬</th>
				</tr>
			</table>
			
			<div style="width:815px;height: 100%;overflow:auto;margin-top:0;"}>
			<table id="checkShowTable" class="rendDivices"
				style="width:800px;height: 100%;margin-top:0;margin-top: 0;table-layout:fixed">
					<tr>
					<th class="rendDivices thncr">&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;</th>
					<th class="rendDivices thncr">&#12288;&#12288;&#12288;&#12288;</th>
				</tr>
					<tr>
					<td class="rendDivices thncr">1111111111111111</td>
					<td class="rendDivices thncr">2222222222</td>
					<td class="rendDivices thncr">33333333333333333333333333333333</td>
					<td class="rendDivices thncr">555555555555555555555555555555555555</td>
					<td class="rendDivices thncr">44444444444444444444444444444444444444444444444444444444444</td>
					<td class="rendDivices thncr">66666666666666666666666666666666666666666666666</td>
					<td class="rendDivices thncr">77777777777777777777777777777777777777</td>
				</tr>
			</table>
		
		</div>
		</div>
	</div>
</body>
</html>

table 表头永远置顶

猜你喜欢