Set maximum displayed rows count for HTML table

Question

Have JSP page with dynamically generated HTML table with unknown number of rows.

Have property on backend, that sets maximum number of rows, e.g: max_rows=15

Answer 1

This can be done with standard HTML, CSS and a bit of javascript. It can be made to degrade gracefully for clients with javascript turned off too. By that I mean, they'll just see the original table, unmodified by scrollbars. Try something like this:

    
    


    

        

            

                
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
            
        
    

This was tested in Firefox, Chrome and IE 7, but it should work all modern browsers. Note that it doesn't matter how tall the content of each row is, or how much padding each cell has. If you don't want to use border-collapse:collapse on your table, then you'll have to add code in the for loop to take cellspacing into account.

If you have thicker borders, then replace the javascript function with this one:

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

The try/catch in there handles the differences between IE and other browsers. The code in the catch is for IE.