>>>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?
>
>For the IE problem try using 'ng-style' rather than 'style'.
>Can you post an image of how the form actually looks now....

This is how it looks in IE with search on the screen and then with the search collapsed (another picture where styles seem to be observed now).

When I collapse the menu, the screen doesn't re-size to the full space in IE but rather goes left also.