Posts Tagged: tables

About table with `display: block` and `overflow-y: auto`

Few days ago my college and I had a page with an extra wide table on it which breaked the page body that is the horizontal scroll appeared on the whole page. We solved the problem with adding the following style on the table: { display: block; overflow-y: auto; max-width: 10px /* any low value here */ }.

But as you may know the tables are not supposed to wear display: block CSS declaration and that was why we failed trying to create something universal for all the tables.

We decided we have to check if the table is extra wide or not and found a quite simple solution, this small: jquery plugin from the answer:

$.fn.hasOverflow = function() { 
    var $this = $(this); 
    var $children = $this.find('*'); 
    var len = $children.length; 
 
    if (len) { 
        var maxWidth = 0; 
        var maxHeight = 0 
        $children.map(function() { 
            maxWidth = Math.max(maxWidth, $(this).outerWidth(true)); 
            maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); 
        }); 
 
        return maxWidth > $this.width() || maxHeight > $this.height(); 
    } 
 
    return false; 
};

We edited it first to make it taking only width in account and then used it in the following way: $('body').hasOverflow().

But it did not work somethimes (probably something more has been changed on the page) and what is also bad thing is that it selects so huge amount of elements on a big pages that it really impacts the performance. But the next day we started to solve it again and in a few minutes we came with a very simple solution:

$(window).width() < $('body')[0].scrollWidth

It works fine by now! We needed just to sleep on it