Customizing cell width of HTML table with jQuery

I have an HTML table as shown below. It has seven columns. I adjust the width of the table cell using jQuery. The total percentage is 100 in jQuery. However, the table does not take up all the space; there is unused space. How to fix it?

http://jsfiddle.net/Lijo/eFS5J/3/

 $(document).ready(function () {


        $('#gridDiv').css('width', '630px');


        //Set width of table cells
        var numberOfColumns = 7;
        $('.resultGridTable th, .resultGridTable td').each(function (i) {


            $(this).css('background-color', (['Purple', 'Orange', 'Purple', 'Orange', 'Purple', 'Orange', 'Purple'][i % 7]));

            if (i % numberOfColumns == 0) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 1) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 2) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 3) {
                $(this).css('width', '15%');
            }
            if (i % numberOfColumns == 4) {
                $(this).css('width', '10%');
            }
            if (i % numberOfColumns == 5) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 6) {
                $(this).css('width', '15%');
            }


        }
 );


    }
);