Fix thead en la página de desplazamiento

Question

Situación: Una página con una tabla con varias filas. Quiero solucionar el problema cuando thead llegue a la parte superior de la página cuando se desplaza, usando jquery o cualquier secuencia de comandos determinada. No quiero desbordar la mesa en sí.

Answer 1

Puede utilizar el código de Lobstrosity con una ligera modificación: en lugar de position: fixedabsolute.

position: fixed ahora es ampliamente adoptado por todos los navegadores, incluido IE8 en adelante. Por cierto, los arreglos fijos son mucho mejores en dispositivos móviles/tabletas que position: absolute.

me encontré con que en una mesa con anchos dinámicos para cada columna, la posición absoluta < culata en T> perdería las anchuras del resto de las columnas, por lo que para solucionar este me ocurrió con el siguiente código:

lo que este código hace es la siguiente:

Determina el ancho de cada columna de la tabla mirando encima de los anchos de CSS de la primera tbody> < tr> < td> fila < y almacenarlos en una matriz para más adelante . Cuando el usuario se desplaza, la clase 'fixed' se agrega al < thead> (El comportamiento predeterminado del navegador alterará el ancho de los < th> 's y no coincidirán con el < tbody>. Por lo tanto, para solucionar esto, retroactivamente establezca los anchos de < th> a los valores que hemos leído anteriormente.

De todos modos aquí está el código:

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

Esto es algo que tipo de funciona (probado rápidamente en FF 3.5, Chrome 3 e IE 8) que usted puede ser capaz de adaptar a sus necesidades.

Utiliza la posición absoluta del thead. Cuando el thead se coloca completamente, esto básicamente lo quita del flujo original del table y los anchos de todos los tbodytd s se ajustan en consecuencia. Así que obtienes un comportamiento desagradable si no especificas el ancho de las columnas o si el encabezado de una columna es más ancho que cualquier otra celda en esa columna.

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"); 
     } 
    }); 
}); 

me di cuenta de que no funciona en IE u NLES se especifica un tipo de documento XHTML estricto:

<!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); 

Puede usar este plugin jquery (debe adaptar el estilo .head a su estilo thead). Ejemplo de trabajo aquí: http://jsfiddle.net/lukasi/7K52p/1/