Icons Disappear From A Table While Word Wrap Is Disabled

[rkeq0515]

I have a table where the first four columns includes an icon.  I want to have word wrap disabled.  When I disable word wrap my icons disappear from a table.  I can't seem to figure out what's going on with this.  I tried expanding the table rows (width and height) to see if the icons were hiding, but that does not seem to be the case.

Screenshot of icons with word wrap enabled:

Screenshot of icons disappearing with word wrap disabled (preferred configuration):

Here is the code I am using:

icons.js

require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'splunkjs/mvc/simplexml/ready!'
  ], function(_, $, mvc, TableView) {

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
          /*  return cell.field; */
            return _(['Column1','Column2','Column3','Column4']).contains(cell.field);
        },
render: function($td, cell) {
            var value = cell.value;
            if(value=="col1data" )
                {
                    $td.html("<div class='col1data'> </div>")
                }
            else if(value=="col2data")
            {
                    $td.html("<div class='col2data'> </div>")
            }
            else if(value=="col3data")
            {
                    $td.html("<div class='col3data'> </div>")
            }
            else if(value=="col4data")
            {
                    $td.html("<div class='col4data'> </div>")
            }

        }
    });

    var sh = mvc.Components.get("table1");
    if(typeof(sh)!="undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }

  });

icons.css

#table1 .col1data {
   background-image: url('/static/app/testapp/images/col1.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
/*   background-color: coral; !important; */
}

#table1 .col2data {
   background-image: url('/static/app/testapp/images/col2.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }

#table1 .col3data {
   background-image: url('/static/app/testapp/images/col3.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }

#table1 .col4data {
   background-image: url('/static/app/testapp/images/col4.png') !important;
   background-repeat: no-repeat !important;
   background-size: 20px 20px; !important;
   background-position: center; !important;
   }