>>>>>>>>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.
>
>With the same styles as the fiddle:

<table class="tableSection">
>    <thead>
>        <tr>
>            <th style="width:60%"><span class="text">album</span>
>            </th>
>            <th style="width:10%"><span class="text">song</span>
>            </th >
>            <th style="width:30%"><span class="text">genre</span>
>            </th>
>        </tr>
>    </thead>
>    <tbody>
>        <tr>
>            <td style="width:60%">album 0</td>
>            <td style="width:10%">song0</td>
>            <td style="width:30%">genre0</td>
>        </tr>
>        <!-- Repeat as required -->
>    </tbody>
>   <tfoot>
>            <td style="width:60%">Footer One</td>
>            <td style="width:10%">Footer Two</td>
>            <td style="width:30%">Footer Three</td>
>    </tfoot>
></table>

;-))))))))