标签：
本文转载自：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>
标签：
原文地址：http://www.cnblogs.com/wpcnblog/p/5703222.html
