纯css控制－表格表头固定，内容多时滚动内容<html>
<head>
<style type="text/css">css设置表格滚动条
* {
margin: 0;
padding: 0;
}
/*所有内容都在这个DIV内*/
.all {
width: 100%;
border: 1px solid #000000;
}
/*表头在这个DIV内*/
.title {
width: 500px; /*这个宽度需要与下⾯的内容的DIV相等*/
}
/*表格样式*/
table {
width: 100%; /*撑满上⾯定义的500像素*/
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
/*表头单元格(这⾥将表头单元格的样式设置成了和单元格⼀样，实际中可以改变)*/
table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显⽰*/
/*word-wrap: break-word; 内容将在边界内换⾏，这⾥显⽰省略号，所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内⽂本溢出时显⽰省略标记（…），省略标记插⼊的位置是最后⼀个字符*/
white-space: nowrap;
}
/*单元格样式*/
table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换⾏，这⾥显⽰省略号，所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}
/*容纳表格内容的DIV，这个DIV上放置滚动条*/
.content {
width: 100%;
height: 100px; /*定⼀下⾼度，要不然就撑出来没滚动条了*/
overflow: scroll; /*总是显⽰滚动条*/
}
/*真正存放内容的DIV*/
.content div {
width: 500px; /*与表头的DIV宽度相同*/
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<table>
<tr>
<th >Operate</th>
<th >Date</th>
<th >Acknowledge</th>
<th >Other1</th>
<th >Other2</th>
<th>Other3</th>
</tr>
</table>
</div>
<div class="content">
<div>
<table>
<tr>
<td >Operate</td>
<td >Date</td>
<td >Acknowledge</td>
<td >Other1</td>
<td >Other2</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other21</td>
<td>Other22</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other31</td>
<td>Other32</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other41</td>
<td>Other42</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>2011-12-12 12:22:34 9987</td>
<td>Acknowledge</td>
<td>Other51</td>
<td>Other52</td>
<!--每个td上都要加个title,⿏标放上去时显⽰全部内容，我这⾥偷懒就写了⼀个-->
<td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td> </tr>
</table>
</div>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。