>>>Re: Bootstrap columns - read the documentation : http://getbootstrap.com/2.3.2/scaffolding.html or just look at bootstrap.css
>>>It uses 12 columns. Each column is 8.3%. If you have more than twelve columns in a row you will have more than 100%.
>>>The total number of columns in your td element is 25. Don't think I can make it any clearer than that.
>>>
>>
>>Yes, read that yesterday already. But even after making sure I have 12 only, it still doesn't size up.
>>
>>
>>>Re: Using span in a th element - read the documentation : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
>>>In 'Usage context' : Permitted content : Zero or more tr elements. Thus 'Span' is not valid content for a tr element.
>>>I see nowhere where Paul suggests using a 'Span' element. Don't think I can make it any clearer than that.
>>>
>>
>>Span is not an element in the thead element itself, it's an element inside td element. The documentation for td says:
>>
>>Permitted content Flow content.
>>
>>No explanation for that, but I assume span inside td is OK.
>>
>>
>>>Re: column sizing in header: Don't know where your table model comes from. If it has name and displayName properties can you not add a width property and set that as well?
>>>
>>>Finally - did you run the simple html example I posted and, if so, did that show the behaviour that you expect ?
>>
>>Yes, I ran the sample you provided and it did work. Yet in my complex form I can not make this work. Although for slighter less columns making sure I have 12 columns per row did help and the layout in the Invoices page seems to be good now (in Chrome). But PayInvoices refuses to cooperate still.
>>
>>My table in that page now is
>>
>>

>><table id="payInvoicesTable" ng-show="payInvoices" class="table table-bordered table-hover table-list">
>>                <thead data-search:table-header data-table="payInvoicesTable" data-search="search()">
>>
>>                </thead>
>>                <tbody>
>>                    <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
>>                        <td>
>>                            <input type="checkbox" ng-model="result.isToBePaid"
>>                                   data-no:dirty-check
>>                                   ng-change="payChange(result)" />
>>                        </td>
>>                        <td>
>>                            <a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>
>>                        </td>
>>                        <td>
>>                            {{result.descrip}}
>>                        </td>
>>                        <td>
>>                            {{result.dateCreated |date: 'medium'}}
>>                        </td>
>>                        <td>
>>                            <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
>>                        </td>
>>                        <td>
>>                            <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>
>>                </tbody>
>>                <tfoot>
>>                    <tr>
>>                        <td class="col-md-1"></td>
>>                        <td class="col-md-2"></td>
>>                        <td class="col-md-3"></td>
>>                        <td class="col-md-3">@String.Format(Labels.totalX, ":")</td>
>>                        <td class="col-md-1"><span ng-class="{'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td>               
>>                        <td class="col-md-2">{{total('payment')|currency}}</td>
>>                    </tr>
>>                </tfoot>
>>            </table>

>>
>>I only define size in the footer now. Doesn't look like it works although same approach (also width in the footer) seems to help in another page.
>>
>>I can probably try to adjust the table's header template to include optional class to column's definition. I'll look into it.
>>
>>I also got rid of the ng-if and span and used JavaScript iif instead - seems to work the same way, e.g.
>>
>>

>><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)">
>>        {{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>

>>
>>If you look closer, you'll see, that span is inside the th element and not the tr or thead.
>
>Sorry, misread your template (I assume that the directive is not replacing the element it is in?)
>I can only suggest looking at the table elements in devtools to see what's actually happening....

The directive for the header is having replace: false. I'll check directive for the table itself. Here is for the header only

(function () {
    'use strict';
    
    var app = angular.module('sysMgrApp');

    app.directive('searchTableHeader', [function () {
        return {
            restrict: 'A',
            replace: false,
            scope: {
                table: '=',
                search: '&',
            },
            controller: ['$scope', function ($scope) {

                $scope.sort = function (column) {
                    if ($scope.table.sort === column.name) {
                        $scope.table.dir = $scope.table.dir === 'asc' ? 'desc' : 'asc';
                    } else {
                        $scope.table.sort = column.name;
                        $scope.table.dir = 'asc';
                    }
                    $scope.search();
                };
              
            }],
            templateUrl: '/app/templates/searchTableHeader'
        };
    }]);
})();

I'll look closer in DevTools (did you mean inspect elements?). Attached is the header's info in inspect elements. What is strange is that each column title has extra line above. May be this is what is causing my grief?

The table's row also has extra spaces I am not sure where they are coming from either. Also see attached. Do you think this is my problem?

Footer seems to be OK and exactly as I defined.