#html #css #html-table #resize
#HTML #css #html-таблица #изменение размера
Вопрос:
У меня есть таблица с тремя столбцами текста, размер которых мне не удается изменить должным образом. В среднем столбце содержится много некритичного текста, который следует обрезать (с многоточием) при изменении размера страницы, но в двух крайних столбцах содержится текст, который нельзя обрезать. Ни один текст не должен быть перенесен. Вот несколько примеров HTML:
<table id="resize-table">
<thead>
<tr>
<th class="col-1">Column 1</th>
<th class="col-2">Column 2</th>
<th class="col-3">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-1">Unclippable text</td>
<td class="col-2">Clippable text that is very long. Clippable text that is very long.</td>
<td class="col-3">Unclippable text</td>
</tr>
</tbody>
И вот css, который я использую:
#resize-table{
width:50%;
border-collapse:collapse;
}
#resize-table th{
padding:0.2em;
border:1px solid black;
}
#resize-table td{
padding:0.2em;
border:1px solid black;
white-space:nowrap;
}
#resize-table .col-2{
overflow: hidden;
text-overflow: ellipsis;
}
При изменении размера страницы средний столбец никогда не обрезается и многоточие никогда не отображается. Вместо этого ячейки таблицы просто перестают уменьшаться, когда они достигают ширины содержимого. Я много играл с разными настройками ширины, но так и не добился, чтобы что-то работало должным образом. Я также пробовал table-layout: fixed, но это просто приводит к тому, что все столбцы изменяются одинаково. Есть идеи?
РЕДАКТИРОВАТЬ: я просматриваю это в Chrome, но кроссбраузерное решение было бы идеальным.
Ответ №1:
Я не могу сказать, можно ли это сделать исключительно в CSS, но если вы рассмотрите некоторые jQuery, вы могли бы достичь чего-то подобного. Рассмотрим следующее.
$(window).resize(function() {
//if the table gets less that 300 say
if ($("#resize-table").width() < 300) {
//class small added so we do not repeat the operation unnecessarily
if (!$(".col-2").hasClass("small")) {
$(".col-2").each(function(){
//put the content in a hidden div for later and only display the ellipses
$(this).html("..." "<div class='content' style='display:none'>" $(this).html() "</div>").addClass("small");
});
}
} else {
//else the table is large enough so
if ($(".col-2").hasClass("small")) {
$(".col-2").each(function() {
//copy the td content back out of the hidden div
$(this).html($(this).find(".content").html()).removeClass("small");
});
}
}
});
Я не пробовал это каким-либо строгим образом, но это делает свою работу. Итак, это элементарная демонстрация осуществимости.
Комментарии:
1. Это интересное решение, но оно скрывает весь текст в центральном столбце. Я бы предпочел, чтобы размер среднего столбца постепенно изменялся с многоточием в конце, а не был скрытым.
2. @DLaw Я уверен, что чем-то подобным тоже можно управлять с помощью некоторого кода. Однако может возникнуть проблема с бесперебойной работой во всех браузерах.