Jquery/css: Loss of table responsiveness when manipulating the width of table cells

I have a responsive table using text-overflow: ellipsis to truncate texts that are too long for their cells.

I coded a script that allows me to expand/collapse a table column when clicking on the column header so that the whole text of its column can be revealed if it was previously truncated.

It all works fine but when a header is clicked and the column resized, the table won't adapt to the page anymore, under a certain width, when resizing the page. So basically, the table is responsive before clicking and loses its responsiveness afterwards.

It kind of make sense (if you fix widths, you lose responsiveness, I guess).

But then, I don't know how to reset these widths on "window resize" so that the table th's and td's become fluid again and the whole table remains responsive after the click event. Otherwise, the feature doesn't make any sense ergonomically.

Here is the html:

<!DOCTYPE html>
<html>
  <body>
        <div class="content">
            <div class="container">
                <table>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th>Col 5</th>
                        <th>Col 6</th>      
                    </tr>
                    <tr>
                        <td>Data 1 - Data 1 - Data 1 - Data 1 - Data 1 - Data 1 - Data 1</td>
                        <td>Data 2 - Data 2 - Data 2 - Data 2 - Data 2 - Data 2 - Data 2</td>
                        <td>Data 3 - Data 3 - Data 3 - Data 3 - Data 3 - Data 3 - Data 3</td>   
                        <td>Data 4 - Data 4 - Data 4 - Data 4 - Data 4 - Data 4 - Data 4</td>
                        <td>Data 5 - Data 5 - Data 5 - Data 5 - Data 5 - Data 5 - Data 5</td>
                        <td>Data 6 - Data 6 - Data 6 - Data 6 - Data 6 - Data 6 - Data 6</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
 </html>

Here is the css:

body{
    padding: 0px;
    margin: 0px;
}

table {
    border-collapse: collapse;
    white-space: nowrap; 
    table-layout: fixed;
    font-size:12px;
    width:100%;
 }

table, th, td {
    border:1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container{
        margin-left:36px;
    margin-top:30px;
}

And here is the jQuery:

var is_resized=0;

/******************************************************************/    

$(document).ready(function(){initialize();});
window.onresize = function(){initialize();};

/******************************************************************/

function initialize() 
{
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    $('.container').width(winWidth-74);
    $('.content').height(winHeight-88);
    $('table').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
}

/******************************************************************/

$("th").click(function()
{       
    tableau   = new Array(); 
    var indx_th   = $(this).index();
    var indx_total;
    var td_minimized_width;
    var td_maximized_width;

    $("td:nth-child("+(indx_th+1)+")").each(function()
    {
        var element = $(this)
                      .clone()
                      .css({'display': 'inline', 'width': 'auto', 'visibility' : 'hidden','font-size':'12px','position': 'absolute', 'top': 0, 'left': 0,'padding':'6px'
                      })
                      .appendTo('body');

        var rect1 = $(this)[0].getBoundingClientRect();
        var rect2 = element[0].getBoundingClientRect();

        td_minimized_width = rect1.right - rect1.left + 1;
        td_maximized_width = rect2.right - rect2.left;      

        element.remove();

        if(! tableau[indx_th]){ tableau[indx_th] = new Array();}        

        if(! tableau[indx_th]['minimized']){
            tableau[indx_th]['minimized'] = new Array();
            tableau[indx_th]['maximized'] = new Array();
            tableau[indx_th]['resize'   ] = 0;
        }

        tableau[indx_th]['minimized'] = td_minimized_width;

        if( td_maximized_width > td_minimized_width ){
            tableau[indx_th]['resize'   ] = 1;

            if( tableau[indx_th]['maximized'] < td_maximized_width)
            {
                tableau[indx_th]['maximized'] = td_maximized_width;   
            }
        }
    });

    if(tableau[indx_th]['resize'] == 1)
    {
        var l=$("td:last-child").index();
        var val= ( ($('table').width()) - (tableau[indx_th]['maximized']) -66 ) / l ;

        $(this).siblings().animate({width: val},550);
        $(this).animate({width: tableau[indx_th]['maximized']-10},550);

        is_resized=1;
    }
    else{
        if(is_resized==1)
        {
            var l=$("td:last-child").index();
            var val= ( ($('table').width()) -66 ) / (l+1) ;

            $('th').animate({width: val},550);                      

            is_resized=0;
        }
    }
});

This is hard to explain and summarize but here is a JSFiddle to illustrate the problem.

https://jsfiddle.net/21vqzo49/1/

Any help would be appreciated.

PS: of course, the jQuery script is kind of overkill for the example but I simplified the HTML here. In the real html code, the amount of rows and columns is dynamic and the script should manage the table accordingly, whatever its size and complexity.

Solution

You need to reset your table header styling when you resize your window.

window.onresize = function(){
    $("th").css({'width':'auto'});
    initialize();
};

That will fix your problem while resizing.