<html>
<head>
<style type="text/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 style="width:10%">Operate</th>
<th style="width:20%">Date</th>
<th style="width:25%">Acknowledge</th>
<th style="width:15%">Other1</th>
<th style="width:15%">Other2</th>
<th>Other3</th>
</tr>
</table>
</div>
<div class="content">
<div>
<table>
<tr>
<td style="width:10%">Operate</td>
<td style="width:20%">Date</td>
<td style="width:25%">Acknowledge</td>
<td style="width:15%">Other1</td>
<td style="width:15%">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>
純css控制－表格表頭固定,內容多時滾動內容
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。