使用jquery的固定列（與表頭問題）

Question

我有一個HTML表格，我需要表格的第一列進行修復，這樣我就可以一路滾動右側，並查看與任何記錄相關的信息第一列，當我嘗試滾動第一列是好的，但它也把固定我的表的下兩個標題。

這是我的jquery：

(function($) { 

$.fn.tableHeadFixer = function(param) { 
    var defaults = { 
     head: true, 
     foot: false, 
     left: 0, 
     right: 0 
    }; 

    var settings = $.extend({}, defaults, param); 

    return this.each(function() { 
     settings.table = this; 
     settings.parent = $("<div></div>"); 
     setParent(); 

     if(settings.head == true) 
      fixHead(); 

     if(settings.left > 0) 
      fixLeft(); 

     // self.setCorner(); 

     $(settings.parent).trigger("scroll"); 

     $(window).resize(function() { 
      $(settings.parent).trigger("scroll"); 
     }); 
    }); 

    function setTable(table) { 

    } 


    function setParent() { 
     var container = $(settings.table).parent(); 
     var parent = $(settings.parent); 
     var table = $(settings.table); 

     table.before(parent); 
     parent.append(table); 
     parent 
      .css({ 
       'width' : '100%', 
       'height' : container.css("height"), 
       'overflow' : 'scroll', 
       'max-height' : container.css("max-height"), 
       'min-height' : container.css("min-height"), 
       'max-width' : container.css('max-width'), 
       'min-width' : container.css('min-width') 
      }); 

     parent.scroll(function() { 
      var scrollWidth = parent[0].scrollWidth; 
      var clientWidth = parent[0].clientWidth; 
      var scrollHeight = parent[0].scrollHeight; 
      var clientHeight = parent[0].clientHeight; 
      var top = parent.scrollTop(); 
      var left = parent.scrollLeft(); 

      if(settings.head) 
       this.find("thead tr > *").css("top", top); 

      if(settings.left > 0) 
       settings.leftColumns.css("left", left); 

     }.bind(table)); 
    } 

    function fixHead() { 
     var thead = $(settings.table).find("thead"); 
     var tr = thead.find("tr"); 
     var cells = thead.find("tr > *"); 

     setBackground(cells); 
     cells.css({ 
      'position' : 'relative' 
     }); 
    } 


    function fixLeft() { 
     var table = $(settings.table); 

     var fixColumn = settings.left; 

     settings.leftColumns = $(); 

     for(var i = 1; i <= fixColumn; i++) { 
      settings.leftColumns = settings.leftColumns 
       .add(table.find("tr > *:nth-child(" + i + ")")); 
     } 

     var column = settings.leftColumns; 

     column.each(function(k, cell) { 
      var cell = $(cell); 

      setBackground(cell); 
      cell.css({ 
       'position' : 'relative' 
      }); 
     }); 
    } 


    function setBackground(elements) { 
     elements.each(function(k, element) { 
      var element = $(element); 
      var parent = $(element).parent(); 

      var elementBackground = element.css("background-color"); 
      elementBackground = (elementBackground == "transparent" || elementBackground == "rgba(0, 0, 0, 0)") ? null : elementBackground; 

      var parentBackground = parent.css("background-color"); 
      parentBackground = (parentBackground == "transparent" || parentBackground == "rgba(0, 0, 0, 0)") ? null : parentBackground; 

      var background = parentBackground ? parentBackground : "white"; 
      background = elementBackground ? elementBackground : background; 

      element.css("background-color", background); 
     }); 
    } 
}; 
})(jQuery); 

而且我也把例子在這個Fiddle就可以了窗口不要讓例子來滾動頁面，如果你本地加載，使窗口小，你會能夠這樣滾動，看到我前面提到的問題與表頭

希望有人能幫助我！

Answer 1

如果您有興趣，只需使用HTML和CSS解決方案即可，無需JS。更容易實現，也可以跨瀏覽器工作，不會像上面的JS可能產生的錯誤。

CSS：

section { 
    position: relative; 
    border: 1px solid #000; 
    padding-top: 37px; 
    background: #500; 
} 
section.positioned { 
    position: absolute; 
    top:100px; 
    left:100px; 
    width:800px; 
    box-shadow: 0 0 15px #333; 
} 
.container { 
    overflow-y: auto; 
    height: 200px; 
} 
table { 
    border-spacing: 0; 
    width:100%; 
} 
td + td { 
    border-left:1px solid #eee; 
} 
td, th { 
    border-bottom:1px solid #eee; 
    background: #ddd; 
    color: #000; 
    padding: 10px 25px; 
} 
th { 
    height: 0; 
    line-height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
} 
th div{ 
    position: absolute; 
    background: transparent; 
    color: #fff; 
    padding: 9px 25px; 
    top: 0; 
    margin-left: -25px; 
    line-height: normal; 
    border-left: 1px solid #800; 
} 
th:first-child div{ 
    border: none; 
} 

HTML：

<section class=""> 
    <div class="container"> 
    <table> 
     <thead> 
     <tr class="header"> 
      <th> 
      Table attribute name 
      <div>Table attribute name</div> 
      </th> 
      <th> 
      Value 
      <div>Value</div> 
      </th> 
      <th> 
      Description 
      <div>Description</div> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>align</td> 
      <td>left, center, right</td> 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> 
     </tr> 
     <tr> 
      <td>bgcolor</td> 
      <td>rgb(x,x,x), #xxxxxx, colorname</td> 
      <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> 
     </tr> 
     <tr> 
      <td>border</td> 
      <td>1,""</td> 
      <td>Specifies whether the table cells should have borders or not</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</section> 

WORKING EXAMPLE