Thanks, I wasted all day on this.  Once I took the 100% off column width and used your code it worked:

var dataGridID;

        function wdgTotals_Initialize(sender, args) {

            dataGridID = sender.get_id()

            var grid = $find(dataGridID)

            syncHeaderFooterWidths(grid);

        }

        function syncHeaderFooterWidths(grid) {

            var cols = grid.get_columns();

            var colCount = cols.get_length();

            var i;

            if (grid._header != null) {

                var headerCells = grid._header.getElementsByTagName("th");

                if (headerCells != null) {

                    for (i = 0; i < colCount; i++) {

                        headerCells[i].style.width = cols.get_column(i).get_width();

                    }

                }

            }

            if (grid._footer != null) {

                var footerCells = grid._footer.getElementsByTagName("th");

                if (footerCells != null) {

                    for (i = 0; i < colCount; i++) {

                        footerCells[i].style.width = cols.get_column(i).get_width();

                    }

                }

            }

        }

In the Grid's Clientside Initialize event. Set the Grid's ClientEvents -> Initialize Property = wdgTotals_Initialize and include the javascript below in your page.

    function wdgTotals_Initialize(sender, args)
    {
      syncHeaderFooterWidths(sender);
    }

Where are you calling this from?