水平和垂直可滚动表格固定标题

我正在寻找可滚动表格。它在宽度固定时工作正常，但在动态创建列时不起作用。水平和垂直可滚动表格固定标题

<table cellspacing="0" cellpadding="0" border="0" width="325"> 
    <tr> 
    <td> 
     <table cellspacing="0" cellpadding="1" border="1" width="300" > 
     <tr> 
      <th>col 1 heading</th> 
      <th>col 2 heading</th> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <div style="width:325px; height:48px; overflow:auto;"> 
     <table cellspacing="0" cellpadding="1" border="1" width="300" > 
      <tr> 
      <td>col 1 data 1</td> 
      <td>col 2 data 1</td> 
      </tr> 
      <tr> 
      <td>col 1 data 2</td> 
      <td>col 2 data 2</td> 
      </tr> 
      <tr> 
      <td>col 1 data 3</td> 
      <td>col 2 data 3</td> 
      </tr> 
     </table> 
     </div> 
    </td> 
    </tr> 
</table>

我发现它从这里http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

观看演示

http://jsfiddle.net/u8yyD/

来源

2012-12-02 user1457190

其实这是相当类似的问题，我的回答。

$(function(){ 
    $("table").stickyTableHeaders(); 
}); 

/*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders 
    MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */ 

;(function ($, window, undefined) { 
    'use strict'; 

    var pluginName = 'stickyTableHeaders'; 
    var defaults = { 
      fixedOffset: 0 
     }; 

    function Plugin (el, options) { 
     // To avoid scope issues, use 'base' instead of 'this' 
     // to reference this class from internal events and functions. 
     var base = this; 

     // Access to jQuery and DOM versions of element 
     base.$el = $(el); 
     base.el = el; 

     // Cache DOM refs for performance reasons 
     base.$window = $(window); 
     base.$clonedHeader = null; 
     base.$originalHeader = null; 

     // Keep track of state 
     base.isCloneVisible = false; 
     base.leftOffset = null; 
     base.topOffset = null; 

     base.init = function() { 
      base.options = $.extend({}, defaults, options); 

      base.$el.each(function() { 
       var $this = $(this); 

       // remove padding on <table> to fix issue #7 
       $this.css('padding', 0); 

       $this.wrap('<div class="divTableWithFloatingHeader"></div>'); 

       base.$originalHeader = $('thead:first', this); 
       base.$clonedHeader = base.$originalHeader.clone(); 

       base.$clonedHeader.addClass('tableFloatingHeader'); 
       base.$clonedHeader.css({ 
        'position': 'fixed', 
        'top': 0, 
        'z-index': 1, // #18: opacity bug 
        'display': 'none' 
       }); 

       base.$originalHeader.addClass('tableFloatingHeaderOriginal'); 

       base.$originalHeader.after(base.$clonedHeader); 

       // enabling support for jquery.tablesorter plugin 
       // forward clicks on clone to original 
       $('th', base.$clonedHeader).click(function (e) { 
        var index = $('th', base.$clonedHeader).index(this); 
        $('th', base.$originalHeader).eq(index).click(); 
       }); 
       $this.bind('sortEnd', base.updateWidth); 
      }); 

      base.updateWidth(); 
      base.toggleHeaders(); 

      base.$window.scroll(base.toggleHeaders); 
      base.$window.resize(base.toggleHeaders); 
      base.$window.resize(base.updateWidth); 
     }; 

     base.toggleHeaders = function() { 
      base.$el.each(function() { 
       var $this = $(this); 

       var newTopOffset = isNaN(base.options.fixedOffset) ? 
        base.options.fixedOffset.height() : base.options.fixedOffset; 

       var offset = $this.offset(); 
       var scrollTop = base.$window.scrollTop() + newTopOffset; 
       var scrollLeft = base.$window.scrollLeft(); 

       if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) { 
        var newLeft = offset.left - scrollLeft; 
        if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) { 
         return; 
        } 

        base.$clonedHeader.css({ 
         'top': newTopOffset, 
         'margin-top': 0, 
         'left': newLeft, 
         'display': 'block' 
        }); 
        base.$originalHeader.css('visibility', 'hidden'); 
        base.isCloneVisible = true; 
        base.leftOffset = newLeft; 
        base.topOffset = newTopOffset; 
       } 
       else if (base.isCloneVisible) { 
        base.$clonedHeader.css('display', 'none'); 
        base.$originalHeader.css('visibility', 'visible'); 
        base.isCloneVisible = false; 
       } 
      }); 
     }; 

     base.updateWidth = function() { 
      // Copy cell widths and classes from original header 
      $('th', base.$clonedHeader).each(function (index) { 
       var $this = $(this); 
       var $origCell = $('th', base.$originalHeader).eq(index); 
       this.className = $origCell.attr('class') || ''; 
       $this.css('width', $origCell.width()); 
      }); 

      // Copy row width from whole table 
      base.$clonedHeader.css('width', base.$originalHeader.width()); 
     }; 

     // Run initializer 
     base.init(); 
    } 

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations 
    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
      } 
     }); 
    }; 

})(jQuery, window);

见参考link

来源

2012-12-02 06:38:16

它的很好的例子。我花了很多时间来解决它。谢谢。！ – user1457190

下面是一个方法来保持对准th和td：

CSS：

.column1class { width:100px; } 
.column2class { width:200px; }

HTML表定义标题和行之后;

<colgroup> 
<col class='column1class'> 
<col class='column2class'> 
</colgroup>

来源

2013-08-30 21:24:24

水平和垂直可滚动表格固定标题

回答

相关问题