Jqueryを使用した固定列（表ヘッダーの問題）

Question

HTML表があり、表の最初の列を修正する必要があるため、すべての方法をスクロールして、最初の列は、私は最初の列をスクロールしようとすると大丈夫ですが、それはまた、私のテーブルの次の2つのヘッダーを固定として置く。

これは私の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