表格表頭固定,內容多時滾動內容
HTML代碼
css
<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>
轉載原文http://redstarofsleep.iteye.com/blog/1010569html
相關文章
- 1. 製作滾動表格，表格頭不動，內容滾動
- 2. 表頭固定內容可滾動表格的3種實現方法
- 3. 固定表頭和第一列、內容可滾動的table表格
- 4. 轉載-------------表頭固定內容可滾動表格的3種實現方法
- 5. CSS實現固定表頭 內容溢出滾動
- 6. Table實現表頭固定 內容滾動
- 7. 豎向表頭固定，橫向隨內容滾動，純css，列寬有問題
- 8. 頭部固定，內容可以自由上下滾動
- 9. Qt中修改滾輪事件：表格顯示內容滾動
- 10. 上面固定，左側固定，右側內容可滾動
- 更多相關文章...
- • jQuery Mobile 列表內容 - jQuery Mobile 教程
- • Eclipse 內容輔助 - Eclipse 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
