I am experiencing an issue with a table containing font-awesome icons in the cells. I have implemented resizable table columns using plain JavaScript. The cell content is hidden when it overflows, and an ellipsis ("...") is displayed:
td, th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The Issue: After resizing the columns to hide the content and then expanding them again, all icons disappear except for the first one.
Expected Outcome: The icons should reappear when the column is expanded again.
Please view the snippet below to observe the problem. Any assistance would be greatly appreciated! Thank you.
(function makeTableHeaderResizable() {
// clear resizers
Array.prototype.forEach.call(
document.querySelectorAll('.table-resize-handle'),
function(elem) {
elem.parentNode.removeChild(elem);
}
);
// create resizers
var thElm;
var startOffset;
Array.prototype.forEach.call(
document.querySelectorAll('table th'),
function(th) {
th.style.position = 'relative';
var grip = document.createElement('div');
grip.innerHTML = ' ';
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = '5px';
grip.style.position = 'absolute';
grip.style.cursor = 'col-resize';
grip.className = 'table-resize-handle';
grip.addEventListener('mousedown', function(e) {
thElm = th;
startOffset = th.offsetWidth - e.pageX;
});
th.appendChild(grip);
}
);
document.addEventListener('mousemove', function(e) {
if (thElm) {
thElm.style.width = startOffset + e.pageX + 'px';
}
});
document.addEventListener('mouseup', function() {
thElm = undefined;
});
})();/* text-overflow: ellipsis is likely causing the issue here */
td, th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table {
table-layout: fixed;
border-top: 1px solid black;
width: 100%;
}
/* styling */
th {
border-right: 1px dotted red;
}
th {
height: 50px;
}
td {
border: 1px solid black;
}
tr {
border-left: 1px solid black;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h5>Drag the right border of the th elements and make the cells smaller. All fa-icons but the first have disappeared when you make the cells wider again.</h5>
<table>
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>
text works normally
</td>
<td>
<i class="fa fa-cog"></i>
<i class="fa fa-edit"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-check"></i>
</td>
<td>
<i class="fa fa-cog"></i>
<i class="fa fa-edit"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-check"></i>
</td>
</tr>
</tbody>
</table>