Crush tables that won't get out of the way of themselves.

readme.md

TableCrusher

This code will crush tables that refuse to collapse small enough to fit their parents.

It will break tables that have a fixed width if that table ever becomes larger then its parent, tho.

It could probably be better, but whatever.

TableCrusher.js

$(function(){
    $("<style type='text/css'> .crushedTable { table-layout:fixed } .crushMe  { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 !important; } </style>").appendTo("head");
    tableCrusher(); // run first thing, because we dont need a resize to be broken.

    var tableCrusherRTime;
    var tableCrushertableCrusherTimeout = false;
    var tableCrusherDelta = 200;
    $(window).resize(function() {
        tableCrusherRTime = new Date();
        if (tableCrusherTimeout === false) {
            tableCrusherTimeout = true;
            settableCrusherTimeout(tableCrusherResizeEnd, tableCrusherDelta);
        }
    });


    function tableCrusherResizeEnd() {
        if (new Date() - tableCrusherRTime < tableCrusherDelta) {
            settableCrusherTimeout(tableCrusherResizeEnd, tableCrusherDelta);
        } else {
            tableCrusherTimeout = false;
            tableCrusher();
        }               
    }

    function tableCrusher() {
        $('table').each(function(){
            var parent = $(this).parent();
            var self = $(this);
            if (self.width() > parent.width()) {
                var colCount = 0;
                self.find('tr:nth-child(1)').first().find('td, th').each(function () {
                    if ($(this).attr('colspan')) {
                       colCount += +$(this).attr('colspan');
                    } else {
                       colCount++;
                    }
                });
                var max = Math.floor(parent.width() / colCount);
                self.addClass('crushedTable');
                self.find('td, th').each(function(){
                    $(this).width(max).addClass('crushMe');
                });
                self.width(parent.width()-2).addClass('crushedTable');
            } else {
                self.find('td, th').each(function(){
                    $(this).removeClass('crushMe').css('width','');
                });
                self.removeClass('crushedTable').css('width',);
            }
        });
    }
});