Fix thead auf Seite blättern

Question

Situation: Eine Seite mit einer Tabelle mit mehreren Zeilen. Ich möchte thead beheben, wenn thead den oberen Rand der Seite beim Scrollen erreichen, mit jquery oder irgendeinem gegebenen Scripting. Ich möchte nicht den Tisch selbst überlaufen.

Answer 1

Sie Lobstrosity den Code mit einer geringfügigen Änderung verwenden können: position: fixed statt absolute.

position: fixed ist jetzt weit verbreitet von allen Browsern einschließlich IE8 und höher übernommen. BTW fixed macht auf mobilen/Tablet-Geräten viel schöner als position: absolute.

fand ich, dass auf einem Tisch mit dynamischen Breiten für jede Spalte, die absolut < Thead positioniert> würde die Breite der restlichen Spalten verlieren, so dass dies zu beheben ich mit dem folgenden Code kam:

Was dieser Code tut, ist wie folgt:

Bestimmt die Breite der einzelnen Spalten in der Tabelle durch die CSS-Breite der ersten < tbody Nachschlagen> < tr> < td> Zeile und diese in einem Array zu speichern für später . Wenn der Benutzer scrollt, wird die Klasse 'fixed' zur < thead> hinzugefügt (das Standardverhalten des Browsers wird die Breite der <e th 's ändern und sie werden nicht mit der < tbody> übereinstimmen. Um das also rückwirkend zu beheben Setzen Sie die Breiten der < th> auf die Werte, die wir zuvor gelesen haben.

Auf jeden Fall hier ist der Code:

CSS

table.entries {width: 100%;border-spacing: 0px;margin:0;} 
table.entries thead.fixed {position:fixed;top:0;} 

HTML

<table class="entries" id="entriestable"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Location</th> 
      <th>DOB</th> 
      <th>Opt&nbsp;in</th> 
      <th>Added</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="name">Ricky Bobby</td> 
      <td>ricky.bobby@email.com</td> 
      <td class="addy"><i>Kent, GB</i></td> 
      <td class="dob">20/08/1984</td> 
      <td>Yes</td> 
      <td class="date">4 hours ago</td> 
     </tr> 
    </tbody> 
</table> 

JavaScript

TableThing = function(params) { 
    settings = { 
     table: $('#entriestable'), 
     thead: [] 
    }; 

    this.fixThead = function() { 
     // empty our array to begin with 
     settings.thead = []; 
     // loop over the first row of td's in <tbody> and get the widths of individual <td>'s 
     $('tbody tr:eq(1) td', settings.table).each(function(i,v){ 
      settings.thead.push($(v).width()); 
     }); 

     // now loop over our array setting the widths we've got to the <th>'s 
     for(i=0;i<settings.thead.length;i++) { 
      $('thead th:eq('+i+')', settings.table).width(settings.thead[i]); 
     } 

     // here we attach to the scroll, adding the class 'fixed' to the &lt;thead> 
     $(window).scroll(function() { 
      var windowTop = $(window).scrollTop(); 

      if (windowTop > settings.table.offset().top) { 
       $("thead", settings.table).addClass("fixed"); 
      } 
      else { 
       $("thead", settings.table).removeClass("fixed"); 
      } 
     }); 
    } 
} 
$(function(){ 
    var table = new TableThing(); 
    table.fixThead(); 
    $(window).resize(function(){ 
     table.fixThead(); 
    }); 
}); 

Answer 2

Hier ist etwas, das Art von funktioniert (schnell in FF 3.5, Chrome 3 und IE 8 getestet), die Sie möglicherweise auf Ihre Bedürfnisse anpassen können.

Es verwendet absolute Positionierung des thead. Wenn der thead absolut positioniert wird, entfernt dies im Grunde genommen ihn aus dem ursprünglichen Fluss des table und die Breiten aller tbodytd s entsprechend anzupassen. Sie erhalten also ein hässliches Verhalten, wenn Sie keine Spaltenbreiten angeben oder wenn der Spaltenkopf einer Spalte breiter ist als jede andere Zelle in dieser Spalte.

CSS

#Grid thead.Fixed 
{ 
    position: absolute; 
} 

HTML

<table id="Grid"> 
    <thead> 
     <tr> 
      <td>A</td> 
      <td>B</td> 
      <td>C</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
     <!-- etc. --> 
    </tbody> 
</table> 

jQuery

$(function() { 
    var table = $("#Grid"); 

    $(window).scroll(function() { 
     var windowTop = $(window).scrollTop(); 

     if (windowTop > table.offset().top) { 
      $("thead", table).addClass("Fixed").css("top", windowTop); 
     } 
     else { 
      $("thead", table).removeClass("Fixed"); 
     } 
    }); 
}); 

bemerkte ich, dass es nicht in IE funktioniert u Nless Sie eine strenge XHTML-Doctype angeben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <!-- etc. --> 

Answer 3

(function ($) { 
    $.fn.fixedHeader = function() { 
     return this.filter('table').each(function() { 
      var that = this; 
      var $head = $('<div></div>').addClass('head'); 
      $(this).before($head); 
      $('th', this).each(function() { 
       var $el = $(this); 
       var $div = $('<div></div>').width($el.outerWidth()).text(
       $el.text()); 
       $head.append($div); 
      }); 
      $(window).on('scroll', function() { 
       var $that = $(that); 
       var w = $(window).scrollTop(); 
       var o = $('th', that).first().offset().top; 
       var tableO = $that.offset().top + $that.height(); 
       if (o < w && tableO > w) { 
        $head.show(); 
       } else { 
        $head.hide(); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

Sie können dieses jquery-Plugin verwenden (Sie müssen den .head-Stil an Ihren thead-Stil anpassen). Arbeitsbeispiel hier: http://jsfiddle.net/lukasi/7K52p/1/