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?