>>>>>>This is what I looked at yesterday too. But you can see he is not using table there at all.
>>>>>
>>>>>The principal is the same : make the body section 'overflow:auto;'. Example using a table here: http://jsfiddle.net/venkateshwar/5KJka/1/
>>>>>Just add the footer - it will work
>>>>
>>>>Do I need to explicitly set the height to some number as in the fiddle? Adding only overflow: auto; seems to have no effect. Looks like I do need to set the value to something, but how would I know the good value to set?
>>>
>>>It's just the height of tbody. Use whatever value you want depending on how many rows should be visible at one time.....
>>
>>I tried to apply this fiddle to our class. I found that float: left and width: 100% for several elements are important otherwise it doesn't work in the fiddle either. However, when applied in our application the appearance became ugly :( I am going to un-do my changes and grab the site.css back from TFS.
>>
>>Looks like I just can not make it work the way I need and I better stop all my css attempts as I spend lots of time with 0 result :(
>
>Looks like it would work if you style the tr (and th) elements appropriately e.g.:

<tr>
>            <td style ="width:80%">album 0</td>
>            <td style ="width:10%">song0</td>
>            <td style ="width:10%">genre0</td>
>        </tr>

Can you please post the updated fiddle?

Here is what I have right now in the form

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

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

                            <td>
                                {{result.descrip}}
                            </td>
                            <td>
                                {{result.lastTransactionDate |date: 'medium'}}
                            </td>
                            <td>
                                {{result.pass_No}}
                            </td>
                            <td>
                                {{result.swipe_No}}
                            </td>
                            <td>
                                {{result.pass_DCI}}
                            </td>
                            <td align="right">
                                <span ng-class="{'negative-amount' : result.balance < 0}">{{result.balance | currency}}</span>
                            </td>
                            <td>
                                <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>
                                <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><span ng-class="{'negative-amount': total('balance') < 0}">{{total('balance')|currency}}</span></td>
                            <td><span ng-class="{'negative-amount': total('fee') < 0}"> {{total('fee')|currency}}</span></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                </div>

In site.css I have right now:

.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/

*/

   /*.tableSection table {
        display: table;
        width: 100%;
    }
    .tableSection thead, tbody {
        float: left;
        width: 100%;
    }
    .tableSection tbody {
        overflow: auto;
        height: 150px;
    }
    .tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    .tableSection th, td {
        width: 33%;
    }*/

I had to comment tableSection part as it somehow affected all other tables even though I only tried to apply it as a class for a div in that particular form.