У меня есть адаптивная таблица, использующая text-overflow: ellipsis для усечения текстов, которые слишком длинны для их ячеек.
Я написал скрипт, который позволяет мне расширять / сворачивать столбец таблицы при нажатии на заголовок столбца, чтобычто весь текст его столбца может быть раскрыт, если он был предварительно усечен.
Все работает нормально, но если щелкнуть заголовок и изменить размер столбца, таблица больше не будет адаптироваться к странице подопределенной ширины, при изменении размера страницы.Таким образом, по сути, таблица реагирует до нажатия и впоследствии теряет свою отзывчивость.
Это имеет смысл (если вы исправляете ширину, вы теряете отзывчивость, я думаю).
Но тогда яне знаю, как сбросить эту ширину при «изменении размера окна», чтобы таблицы th и 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-коде количество строк и столбцов является динамическим, и скрипт должен управлять таблицей соответственно, независимо от ее размера и сложности.