Jquery/css：在操作 table 单元格的宽度时失去 table 响应能力

Question

我有一个响应式 table 使用 text-overflow: ellipsis 截断对于单元格来说太长的文本。

我编写了一个脚本，允许我在单击列 header 时 expand/collapse 一个 table 列，以便可以显示其列的全部文本，如果它以前是被截断了。

一切正常，但是当单击 header 并调整列大小时，table 将不再适应页面，在一定宽度下，调整页面大小时。所以基本上，table 在点击之前是有响应的，然后就失去了响应能力。

有点道理（我猜如果你固定宽度，你就会失去响应能力）。

但是，我不知道如何在 "window resize" 上重置这些宽度，以便 table th 和 td 再次变得流畅并且整个 table 在点击事件。否则，该功能在人体工程学上没有任何意义。

这里是 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>

这是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;
}

这里是 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;
        }
    }
});

这很难解释和总结，但这里有一个 JSFiddle 来说明这个问题。

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

如有任何帮助，我们将不胜感激。

PS：当然，jQuery 脚本对于这个例子有点过分了，但我在这里简化了 HTML。在真正的 html 代码中，行和列的数量是动态的，脚本应该相应地管理 table，无论其大小和复杂性如何。

Answer 1

您需要在调整 window 大小时重置 table header 样式。

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

这将解决您在调整大小时遇到的问题。

Jquery/css：在操作 table 单元格的宽度时失去 table 响应能力

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

jquery

css

html-table

ellipsis