Hi Viv,

I almost got the appearance I need except that the column lines are not fixed and the width of each column seems slightly different.

Here is my page now:

<table id="applyFeesTable" class="table table-bordered table-hover table-list tableSection" ng-show="invoicesToApplyFees">
                <thead data-search:table-header data-table="applyFeesTable" data-search="search()">
                </thead>
                <tbody>
                    <tr ng-repeat="result in invoicesToApplyFees" ng-form="applyFeesRow">

                        <td style="width:8%;">
                            <a href="javascript:void(0);"><span ng-click="drillDown(result.invoiceNo)">{{result.invoiceNo}}</span></a>
                        </td>

                        <td style="width:12%;">
                            {{result.descrip}}
                        </td>
                        <td style="width:28%;">
                            {{result.lastTransactionDate |date: 'medium'}}
                        </td>
                        <td style="width:8%;">
                            {{result.pass_No}}
                        </td>
                        <td style="width:8%;">
                            {{result.swipe_No}}
                        </td>
                        <td style="width:12%;">
                            {{result.pass_DCI}}
                        </td>
                        <td align="right" style="width:8%;">
                            <span ng-class="{'negative-amount' : result.balance < 0}">{{result.balance | currency}}</span>
                        </td>
                        <td style="width:10%;">
                            <div class="input-group">
                                <span class="input-group-addon">@Labels.currencySymbol</span>
                                <input type="number" name="payment" ng-model="result.fee" id="payment"
                                       ng-disabled="!result.payit"
                                       ng-class="{'negative-amount' : result.fee < 0}"
                                       min="0"
                                       class="form-control"
                                       data-sm:number placeholder=" 000.00"
                                       data-sm:number-format data-accuracy="2" />
                            </div>
                        </td>
                        <td style="width:6%;">
                            <input type="checkbox" ng-model="result.payit"
                                   ng-change="payChange(result)" />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6">@String.Format(Labels.totalX, ':')</td>
                        <td style="width:8%;"><span ng-class="{'negative-amount': total('balance') < 0}">{{total('balance')|currency}}</span></td>
                        <td style="width:10%;"><span ng-class="{'negative-amount': total('fee') < 0}"> {{total('fee')|currency}}</span></td>
                        <td style="width:6%;"></td>
                    </tr>
                </tfoot>
            </table>

The th are expanded in run-time using the directive searchTableHeader (in the controller I specified width for each of the column the same as I now assign for the rows).

Attached is the screen shot of the form now - do you see what should I fix in css or form?

My css now is

.table-list {
    cursor: pointer;
}

    .table-list > tbody > tr:nth-child(odd) > td {
        background-color: #f1f1f1;
    }

    .table-list > tbody > tr:hover > td, .table-hover > thead > tr > th:hover {
        background-color: #e9e9e9;    
    }

    .table-list > tfoot {
         font-size:large;
         text-align:right;   
         
    }
/*http://jsfiddle.net/venkateshwar/5KJka/1/

*/

   table.tableSection {
        display: table;
        width: 100%;
    }
    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    table.tableSection tbody {
        overflow: auto;
        height: 270px;
    }
    table.tableSection tr {
        width: 100%;
        display: table;        
    }