text-overflow: ellipsis removes font-awesome icons

Question

I have a simple table with font-awesome icons in their cells. I made the table columns resizable by using plain javascript. The cells content is hidden if overflown and an ellipsis ("...") is shown:

td, th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The Problem: When resizing the columns so that the content is hidden and then making it bigger again, all icons but the first are gone.

Expected behaviour: Icons should reappear when making the column bigger again.

Please run the snippet below to see it in action. Any help highly appreciated! Thanks.

(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>

Answer 1

You can set the display property of fa class to inline (working fiddle here):

td .fa {
  display: inline !important;
}