本文转载自：http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html

我的技术要点：

　　１、用两个表，其中一个是表头，另一个是表格做表体
　　２、两个表格使用相同的百分比宽度
　　３、在IE下，如果列溢出，则采用　...　来表示溢出，FF下自动隐藏
　　４、采用JQuery，把表头的列宽，设置到表体第一列。
　　５、在窗体大小改变时，自动设置表头的容器宽度为表体的宽度。

不复杂，代码如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.     <title>Untitled</title>
  6.     <style type="text/css">
  7.     .oddtr
  8.     {
  9.         background-color:#efefef;
  10.     }
  11.  
  12.     .fixheader_table table
  13.     {
  14.         border-collapse:collapse;
  15.         width:100%;
  16.         border-width:0px;
  17.     }
  18.     .fixheader_table table td
  19.     {
  20.         border-collapse:collapse;
  21.         width:100%;
  22.         border:solid 1px #ccf;
  23.     }
  24.  
  25.     .fixheader_table > .header
  26.     {
  27.     }
  28.     .fixheader_table > div.body
  29.     {
  30.         overflow:auto;height:200px;  /* IE下这样设置不管用,没有办法，我只好设置到　style中了　*/
  31.         border:solid 1px red;
  32.     }
  33.  
  34.     .ellipsis table{
  35.         table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
  36.     }
  37.     .ellipsis table tr{
  38.         height:25px;
  39.         line-height:25px;
  40.     } 
  41.  
  42.     .ellipsis table td{
  43.         word-break:keep-all;/* 不换行 */
  44.         white-space:nowrap;/* 不换行 */
  45.         overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  46.         text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记() ；需与overflow:hidden;一起使用。*/
  47.     }
  48.     </style>
  49.     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  50.     <script type="text/javascript">
  51.     $(function()
  52.     {
  53.         var headerCells = $('.fixheader_table .header table tr:first td');
  54.         $('.fixheader_table .body table tr:first td').each(function(i,n)
  55.         {
  56.             $(this).css('width',headerCells.eq(i).css('width'));
  57.         });
  58.         //关联宽度
  59.         $(window).resize(function () {
  60.             $('.fixheader_table .header').width($('.fixheader_table > .body table').width());
  61.         }).triggerHandler('resize');
  62.  
  63.     });
  64.     </script>
  65.  
  66. </head>
  67.  
  68. <body>
  69. <div class="fixheader_table">
  70.     <div class="header ellipsis">
  71.         <table>
  72.             <tr>
  73.                 <td style="width:40%">标题</td>
  74.                 <td style="width:30%">姓名</td>
  75.                 <td style="width:30%">时间</td>
  76.             </tr>
  77.         </table>
  78.     </div>
  79.     <div class="ellipsis body" style="overflow:auto;height:200px;">
  80.         <table>
  81.             <tr>
  82.                 <td>中国人民大团结万岁</td>
  83.                 <td>张三</td>
  84.                 <td>2009-3-6</td>
  85.             </tr>
  86.             <tr>
  87.                 <td>中国人民大团结万岁</td>
  88.                 <td>张三</td>
  89.                 <td>2009-3-6</td>
  90.             </tr>
  91.             <tr>
  92.                 <td>中国人民大团结万岁</td>
  93.                 <td>张三</td>
  94.                 <td>2009-3-6</td>
  95.             </tr>
  96.             <tr>
  97.                 <td>中国人民大团结万岁</td>
  98.                 <td>张三</td>
  99.                 <td>2009-3-6</td>
  100.             </tr>
  101.             <tr>
  102.                 <td>中国人民大团结万岁</td>
  103.                 <td>张三</td>
  104.                 <td>2009-3-6</td>
  105.             </tr>
  106.             <tr>
  107.                 <td>中国人民大团结万岁</td>
  108.                 <td>张三</td>
  109.                 <td>2009-3-6</td>
  110.             </tr>
  111.             <tr>
  112.                 <td>中国人民大团结万岁</td>
  113.                 <td>张三</td>
  114.                 <td>2009-3-6</td>
  115.             </tr>
  116.             <tr>
  117.                 <td>中国人民大团结万岁</td>
  118.                 <td>张三</td>
  119.                 <td>2009-3-6</td>
  120.             </tr>
  121.             <tr>
  122.                 <td>中国人民大团结万岁</td>
  123.                 <td>张三</td>
  124.                 <td>2009-3-6</td>
  125.             </tr>
  126.             <tr>
  127.                 <td>中国人民大团结万岁</td>
  128.                 <td>张三</td>
  129.                 <td>2009-3-6</td>
  130.             </tr>
  131.             <tr>
  132.                 <td>中国人民大团结万岁</td>
  133.                 <td>张三</td>
  134.                 <td>2009-3-6</td>
  135.             </tr>
  136.             <tr>
  137.                 <td>中国人民大团结万岁</td>
  138.                 <td>张三</td>
  139.                 <td>2009-3-6</td>
  140.             </tr>
  141.             <tr>
  142.                 <td>中国人民大团结万岁</td>
  143.                 <td>张三</td>
  144.                 <td>2009-3-6</td>
  145.             </tr>
  146.             <tr>
  147.                 <td>中国人民大团结万岁</td>
  148.                 <td>张三</td>
  149.                 <td>2009-3-6</td>
  150.             </tr>
  151.             <tr>
  152.                 <td>中国人民大团结万岁</td>
  153.                 <td>张三</td>
  154.                 <td>2009-3-6</td>
  155.             </tr>
  156.             <tr>
  157.                 <td>中国人民大团结万岁</td>
  158.                 <td>张三</td>
  159.                 <td>2009-3-6</td>
  160.             </tr>
  161.             <tr>
  162.                 <td>中国人民大团结万岁</td>
  163.                 <td>张三</td>
  164.                 <td>2009-3-6</td>
  165.             </tr>
  166.         </table>
  167.     </div>
  168.  
  169. </div>
  170.  
  171. </body>
  172. </html>

(转)用JQuery实现Fix表头表格的更多相关文章

  1. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  2. jQuery——能够编辑的表格

    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...

  3. FineUI小技巧（7）多表头表格导出

    前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述.今天我们要更进一步,介绍下如何导出多表头表格. 多表头表格的标签定义 在 ...

  4. jQuery（6）——jQuery对表单、表格的操作及更多应用

    jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不 ...

  5. HTML多表头表格

    1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  7. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  8. [转]jQuery实现清空table表格除首行外的所有数据

    1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分. 其中J_tab_fam是table的id. 1 $("#J_tab_fam  tr:no ...

  9. 第5章 jQuery对表单、表格的操作及更多应用

    本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...

随机推荐

  1. 非常基础的css注意点

    排版了很多页面,才发现自己忽视了一个很基本且重要的知识点: 一个div在一般的浏览器中,算它的width,要计算其content,padding,border. 但是在CSS中定义一个div的widt ...

  2. 使用AjaxPro

    1:后台注册 protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(ty ...

  3. Java-->多线程复制（文件指针）

    --> 这里用到两种方法...其实也不算两种,就一点点不一样而已... ---> Test 测试类 package com.dragon.java.multithreadcopy; imp ...

  4. Hive cli源码阅读和梳理

    对Cli的重新认识*). hive cli有两种模式, 本地模式: 采用持有的driver对象来处理, 远程模式: 通过连接HiveServer来实现, 由此可见之前的架构图中的描述还是模糊且带有误导 ...

  5. Java 性能优化实战记录(2)---句柄泄漏和监控

    前言: Java不存在内存泄漏, 但存在过期引用以及资源泄漏. (个人看法, 请大牛指正) 这边对文件句柄泄漏的场景进行下模拟, 并对此做下简单的分析.如下代码为模拟一个服务进程, 忽略了句柄关闭, ...

  6. ipython notebook

    pip install jupyter和pip install "ipython[all]"

  7. C++ Primer : 第十一章 : 关联容器之概述、有序关联容器关键字要求和pair类型

    标准库定义了两种主要的关联容器:map和set map中的元素时一些关键字-值(key-value)对,关键字起到索引的作用,值则表示与索引相关的数据.set中每个元素只包含一个关键字,可以完成高效的 ...

  8. 学霸网站之NABCD

    1.需求(Need) 随着社会的发展,互联网产业得到了飞速的发展,如今,互联网在各个领域都取得了至关重要的作用,随之而来的数量庞大的数据也让我们每个人在学习生活中倍感压力,如何才能在这些数据中找到自己 ...

  9. 目前用到最全的datagrid（easyui）

    包含checkbox.复合表头.多行可编辑单元格.combobox单元格,就差上次做的table中每行中的关联检索combobox单元格了.目前已修改为单行编辑,多行编辑时的check有问题 $(&q ...

  10. 由浅入深漫谈margin属性1

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情 ...