Table display incorrect until column header is clicked

galcott

One of my tables is being displayed with misaligned column headers and and a width that is too narrow for a column containing 2 icons, so that the icons display vertically instead of horizontally, as shown in the first screen shot. As soon as I click on a column header the display changes to the way it should be, as in the second screen shot. I have 2 other tables that do not have this problem although they are defined almost identically. Here is the code for the table:

  dtFormulas = $('#tblFormulas').DataTable({
    ajax: 'sqlprocs.asp?proc=getformulas',
    language: {'emptyTable': 'No formulas found'},
    dom: '<"top"f>rt<"bottom"p><"clear">',
    paging: true,
    scrollY: '350px',
    scrollX : false,
    scrollCollapse : true,
    paging : false,
    select: {style: 'single'},
    columnDefs: [ {
      targets: 2,
      data: null,
      width: '50px',
      defaultContent: '<image src=edit.png title="Edit" class=editherb_png>&nbsp;<image src=delete.png title="Delete" class=deleteherb_png>'
            }
    ]
 });