>Hi everybody,
>
>I am trying for last 2+ hours to get the appearance I want for my table based grid and I am failing miserably :(
>
>Here is my current page (in AngularJs):
>
>

><ng-form name="editAccountInvoices" ng-show="!isNew">
>    <div class="widget-content ng-cloak">
>        <div class="col-lg-12">
>            <div class="form-group row col-lg-12">
>                <div class="input-group">
>                    <label class="sr-only col-lg-3">Label!</label>
>                    <input type="text" class="form-control" ng-model="filterOptions.filterText"
>                           data-no:dirty-check
>                           placeholder="@Labels.search" />
>                    <span class="input-group-btn">
>                        <button class="btn btn-default"
>                                ng-click="search()">
>                            @Labels.search
>                        </button>
>                    </span>
>                </div>
>            </div>
>        </div>
>        <div class="col-lg-12">
>            <div class="form-group row col-lg-12">
>
>                <div class="checkbox pull-left">
>                    <label>
>                        <input type="checkbox" name="showFinalized" id="showFinalized"
>                               ng-model="showFinalized" data-no:dirty-check />Show Finalized Invoices
>                    </label>
>                </div>
>            </div>
>        </div>
>
>        <div class="padd" style="height:550px">
>            <div class="ng-load-indicator" ng-show="isInvoicesLoading"></div>
>            <div class="alert alert-info" ng-show="alertType === 'info'">
>                <i class="icon-info-sign icon-2x"></i>
>                {{ alertMessage }}
>            </div>
>
>            <table id="invoicesTable" ng-show="invoices" class="table table-bordered table-hover table-list">
>                <thead data-search:table-header data-table="invoicesTable" data-search="search()">
>
>                </thead>
>                <tbody>
>                    <tr ng-repeat="result in invoices">
>                        <td class="col-md-2">
>
>                            <a href="javascript:void(0);"><span ng-click="drillDown(result.invoiceNo)">{{ result.invoiceNo }}</span></a>
>                            <span class=" label label-danger pull-right" ng-show="result.hidden">Hidden</span>
>                        </td>
>                        <td class="col-md-5">
>                            {{ result.descrip }}
>                            <span class="label label-danger pull-right" ng-show="result.hidden">Hidden</span>
>                        </td>
>                        <td class="col-md-9">
>                            {{ result.created |date: 'medium'}}
>                            <span class="label label-danger pull-right" ng-show="result.hidden">Hidden</span>
>                        </td>
>                        <td class="col-md-6">
>                            <span ng-class="{'negative-amount' : result.balance < 0}">{{result.balance | currency}}</span>
>                            <span class="label label-danger pull-right" ng-show="result.hidden">Hidden</span>
>                        </td>
>                    </tr>
>                </tbody>
>                <tfoot><tr><td></td><td></td><td>Total:</td><td><span ng-class=" {'negative-amount': total('balance') < 0}">{{total('balance')|currency}}</span></td></tr></tfoot>
>            </table>
>        </div>
>
>        <div class="widget-foot ng-cloak sm-pager">
>            <button class="btn btn-primary pull-left" id="btnNew" ng-click="newInvoice()">New</button>
>
>            <div class="pull-right" ng-show="invoicesTable.pageCount > 1">
>                <pagination total-items="invoicesTable.totalCount"
>                            page="invoicesTable.pageNumber"
>                            items-per-page="invoicesTable.pageSize"
>                            max-size="5"
>                            rotate="false"
>                            on-select-page="selectPage(page)">
>                </pagination>
>            </div>
>        </div>
>    </div>
></ng-form>

>
>So, right now my problem is the footer of my grid (table based).
>
>I added the following style into our site.css:
>
>

>.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;
>        
>         position: absolute;
>         bottom: 20px;        
>    }

>
>I've added the last one for the tfoot.
>
>Please see attached picture. It is almost what I want except for the fact I want my Total and Balance to be under next to last and last columns. I am not sure how to make it work.
>
>Thanks a lot in advance.
>
>My other idea is to try inserting tab into each cell in my footer. Would it work instead?

I assume you tried 'pull-right' (tho I don't know if it would help).

Do what I do in cases like this:
Fire it up in Chrome. Select the element so you can see exactly how it is sized and then play with the attributes in Chrome till it looks right :-}