>AFAICS your use of the 'col-xx-x' class is merely applying the style width attribute - so your page translates to:

            <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
>                <td style="width: 16.666666666666664%;">
>                    <input type="checkbox" ng-model="result.isToBePaid"
>                           data-no:dirty-check
>                           ng-change="payChange(result)" />
>
>                </td>
>                <td style="width: 16.666666666666664%;">
>                    <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
>                </td>
>                <td class="col-md-5" style="width:41.66666666666667%;">
>                    {{result.descrip}}
>                </td>
>                <td style="width: 100%;">
>                    {{result.dateCreated |date: 'medium'}}
>                </td>
>                <td style="width: 33.33333333333333%;">"
>                    <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
>                </td>
>                <td style="width: 33.33333333333333%;">
>                    <input type="number" name="payment" ng-model="result.payment" id="payment"
>                           ng-disabled="!result.isToBePaid"
>                           ng-class="{'negative-amount' : result.payment < 0}"
>                           min="0"
>                           data-no:dirty-check
>                           data-sm:number placeholder=" 000.00"
>                           data-sm:number-format data-accuracy="2" />
>                    <div class="field-validation-error">
>                        <span ng-show="payInvoicesRow.payment.$error.min">Payment should not be negative.</span>
>                    </div>
>                </td>
>            </tr>

Obviously your percentages don't add up......

Hi Viv,

I can not figure out how to incorporate new property width into this:

<th ng-repeat="column in table.columns" ng-click="sort(column)">
        {{column.displayName == undefined || column.displayName == ''?column.name:column.displayName}}

So, my column may (or may not) have this new property width, I want to use it in the th style:'width:column.width%;' here if it's defined.

E.g. I added this:

   $scope.payInvoicesTable = searchScreenService.getTable('Invoice_No', [
                { name: 'isToBePaid', displayName: resourceFactory.getResource('Labels', 'payX').format('?'), width: 8 },
                { name: 'Invoice_No', displayName: resourceFactory.getResource('Labels', 'invoiceX').format('#'), width: 12 },
                { name: 'Descrip', displayName: resourceFactory.getResource('Labels', 'descrip'), width: 17 },
                { name: 'DateCreated', displayName: resourceFactory.getResource('Labels', 'dateCreated'), width: 32 },
                { name: 'InvoiceBalance', displayName: resourceFactory.getResource('Labels', 'balance'), width: 15 },              
                { name: 'Payment', displayName: resourceFactory.getResource('Labels', 'payment'), width: 16 },
                ]);
                $scope.payInvoicesTable.pageSize = 5;

How now I can use the column.width property in the above?