(转)用JQuery实现Fix表头表格
生活随笔
收集整理的這篇文章主要介紹了
(转)用JQuery实现Fix表头表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文轉載自：http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html
我的技術要點：
１、用兩個表，其中一個是表頭，另一個是表格做表體
２、兩個表格使用相同的百分比寬度
３、在IE下，如果列溢出，則采用 ... 來表示溢出，FF下自動隱藏
４、采用JQuery，把表頭的列寬，設置到表體第一列。
５、在窗體大小改變時，自動設置表頭的容器寬度為表體的寬度。
不復雜，代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head><title>Untitled</title><style type="text/css">.oddtr{background-color:#efefef;}.fixheader_table table{border-collapse:collapse;width:100%;border-width:0px; }.fixheader_table table td{border-collapse:collapse;width:100%;border:solid 1px #ccf; }.fixheader_table > .header{}.fixheader_table > div.body{overflow:auto;height:200px; /* IE下這樣設置不管用,沒有辦法，我只好設置到 style中了 */border:solid 1px red;}.ellipsis table{table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */}.ellipsis table tr{height:25px;line-height:25px;} .ellipsis table td{word-break:keep-all;/* 不換行 */white-space:nowrap;/* 不換行 */overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記() ；需與overflow:hidden;一起使用。*/} </style><script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript">$(function(){ var headerCells = $('.fixheader_table .header table tr:first td');$('.fixheader_table .body table tr:first td').each(function(i,n){$(this).css('width',headerCells.eq(i).css('width'));});//關聯寬度 $(window).resize(function () {$('.fixheader_table .header').width($('.fixheader_table > .body table').width());}).triggerHandler('resize');});</script></head><body> <div class="fixheader_table"><div class="header ellipsis"><table><tr><td style="width:40%">標題</td><td style="width:30%">姓名</td><td style="width:30%">時間</td></tr></table></div><div class="ellipsis body" style="overflow:auto;height:200px;"><table><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr><tr><td>中國人民大團結萬歲</td><td>張三</td><td>2009-3-6</td></tr></table></div></div></body> </html>?
轉載于:https://www.cnblogs.com/wpcnblog/p/5703222.html
總結
以上是生活随笔為你收集整理的(转)用JQuery实现Fix表头表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 方舟甲龙吃什么驯养快 方舟生存进化
- 下一篇： 读写应用程序数据-NSUserDefau