>>In Chrome use the 'Inspect Element' (magnifying class icon - top left). This will allow you to drill down and see the areas allocated to each element. If one looks wrong then click on it an see what styles are being applied.
>
>I added this code
>
>

><tr style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'>
>    <th ng-repeat="column in table.columns" ng-click="sort(column)"  style="width: {{ column.width == undefined?100/table.columns.length:column.width }}%;">
>        {{column.displayName == undefined || column.displayName == ''?column.name:column.displayName}}
>        <span class="pull-right" href="#" ng-show="column.name === table.sort">
>            <i ng-class="{'icon-chevron-down': table.dir === 'asc', 'icon-chevron-up': table.dir === 'desc'}"></i>
>        </span>
>    </th>
></tr>

>
>When I inspect th elements I can see that the values I assigned are correctly displayed (e.g. 8%, 12%, 17%, 32%, 15% and 16%) but yet the appearance of the table remains the same as it was. So, looks like the style has no bearance at all.
>
>Interestingly, in Google Chrome that expression correctly evaluates when I run my application. In IE 11 it doesn't seem to evaluate (see attached in IE). Is this expression wrong?

Also try changing your ng-repeat to something like (simplified):

<th ng-repeat="column in table.columns" ng-attr-style="width:{{(column.width === undefined) && 100/table.columns.length || column.width }}%">
                        {{column.displayName===undefined ? column.name: column.displayName}}
                    </th>