我有一个响应表使用text-overflow: ellipsis截断这对他们的细胞太长文本。
我编写了一个脚本，让我展开/折叠表列列标题，以便其列的全部文本可如果它以前被截断显露出来，当点击。
这一切工作正常，但被点击的标题和列调整时，调整页面时该表将无法适应页面了，有一定的宽度，下。所以基本上，该表是点击响应之前，之后失去了它的响应速度。
这样的意义（如果您修复宽度，你失去响应，我猜）。
不过，我不知道如何将这些宽度重置“窗口大小调整”，使表日的和TD的再次成为液体，整个表保持在click事件之后响应。否则，该功能没有任何意义人体工程学。
下面是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代码，行和列的数量是动态的和脚本应该相应管理表，无论其规模和复杂性。
你需要，当你调整你的窗口重置您的表头的造型。
window.onresize = function(){
$("th").css({'width':'auto'});
initialize();
};
而调整，这将解决您的问题。