Establecer el número máximo de filas mostradas para la tabla HTML

Tenemos la mejor solución que descubrimos on line. Nosotros deseamos que te sea útil y si puedes compartir algo que nos pueda ayudar a mejorar hazlo libremente.

Solución:

Esto se puede hacer con HTML estándar, CSS y un poco de javascript. También se puede hacer que se degrade con gracia para los clientes con javascript desactivado. Con eso quiero decir que solo verán la tabla original, sin modificaciones por las barras de desplazamiento. Prueba algo como esto:

    
    


    

        

            

                
blah blah
                
blah blah
                
blah blah
                
blah blah
            
            

                
Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                
blah blah
                
blah blah
                
blah blah
            
            

                
blah
                
blah
                
blah
                
blah
            
            

                
blah blah
                
blah blah
                
blah blah
                
blah blah
            
            

                
blah blah
                
blah blah
                
blah blah
                
blah blah
            
            

                
blah blah
                
blah blah
                
blah blah
                
blah blah
            
            

                
blah
                
blah
                
blah
                
blah
            
        
    

Esto se probó en Firefox, Chrome e IE 7, pero debería funcionar en todos los navegadores modernos. Tenga en cuenta que no importa qué tan alto sea el contenido de cada fila o cuánto relleno tenga cada celda. Si no desea utilizar border-collapse:collapse en su tabla, deberá agregar código en el bucle for para tener en cuenta el espacio entre celdas.

Si tiene bordes más gruesos, reemplace la función javascript con esta:

function makeTableScroll() 
    // Constant retrieved from server-side via JSP
    var maxRows = 4;

    var table = document.getElementById('myTable');
    var wrapper = table.parentNode;
    var rowsInTable = table.rows.length;
    try 
        var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width');
        border = border.replace('px', '') * 1;
     catch (e) 
        var border = table.rows[0].cells[0].currentStyle.borderWidth;
        border = (border.replace('px', '') * 1) / 2;
    
    var height = 0;
    if (rowsInTable > maxRows) 
        for (var i = 0; i < maxRows; i++) 
            height += table.rows[i].clientHeight + border;
        
        wrapper.style.height = height + "px";
    

Try/catch allí maneja las diferencias entre IE y otros navegadores. El código en la captura es para IE.

Editar: Esto en realidad no resuelve el problema propuesto. Me perdí la parte de la pregunta en la que el usuario debe poder desplazarse para ver el resto de las filas. ¡Vaya! Entonces, supongo que js es realmente necesario.

---

En realidad, esto se puede hacer sin javascript. El truco es usar nth-child(x):

table 
    border-collapse: collapse;


tr:nth-child(n + 4) 
    visibility: hidden;

Se necesita el colapso de borde para que el borde no se extienda más allá de las filas ocultas.

Aquí está el violín.

Coloque su tabla en un bloque div y use CSS para especificar la propiedad de altura y desbordamiento del div.

  
     ...table content...
  

De esta manera, el div tiene una altura fija y el navegador agregará una barra de desplazamiento cuando el contenido del bloque div sea demasiado alto.

Establecí la altura en 15em, que corresponde a 15 * font-height. Cuando se usan bordes, rellenos y otras cosas, esta altura es incorrecta. Pero se puede calcular más correctamente (en px) para su diseño.

valoraciones y reseñas

Si crees que ha sido provechoso este post, sería de mucha ayuda si lo compartes con el resto programadores y nos ayudes a extender esta información.

---

---

Utiliza Nuestro Buscador