cssOMS/tests/app/tables.php

<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="box wf-100">
            <table class="table green" id="table1">
                <caption>Table Title</caption>
                <thead>
                <tr>
                    <td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Col2</td>
                    <td>Col1</td>
                    <td>Col4</td>
                    <td>Col3</td>
                </tr>
                <tr>
                    <td>Col4</td>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                <tr>
                    <td>Col2</td>
                    <td>Col1</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">
                        <label>Results: 4</label>
                        <select>
                            <option>25</option>
                            <option>50</option>
                            <option>100</option>
                            <option>500</option>
                        </select>
                        <ul class="pagination">
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li>...</li>
                            <li><a href="#">20</a></li>
                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="col-xs-12 col-md-6">
        <div class="box wf-100">
            <table class="table blue" id="table2">
                <caption>Table Title</caption>
                <thead>
                <tr>
                    <td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                    <td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Col3</td>
                    <td>Col4</td>
                    <td>Col2</td>
                    <td>Col1</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col4</td>
                    <td>Col3</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                <tr>
                    <td>Col4</td>
                    <td>Col2</td>
                    <td>Col1</td>
                    <td>Col3</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">
                        <label>Results: 4</label>
                        <select>
                            <option>25</option>
                            <option>50</option>
                            <option>100</option>
                            <option>500</option>
                        </select>
                        <ul class="pagination">
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li>...</li>
                            <li><a href="#">20</a></li>
                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12">
        <div class="box wf-100">
            <table class="table red">
                <caption>Table Title</caption>
                <thead>
                <tr>
                    <td>Col1 Title</td>
                    <td>Col2 Title</td>
                    <td>Col3 Title</td>
                    <td>Col4 Title</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                <tr>
                    <td>Col1</td>
                    <td>Col2</td>
                    <td>Col3</td>
                    <td>Col4</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4">
                        <label>Results: 4</label>
                        <select>
                            <option>25</option>
                            <option>50</option>
                            <option>100</option>
                            <option>500</option>
                        </select>
                        <ul class="pagination">
                            <li><a href="#" class="active">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li>...</li>
                            <li><a href="#">20</a></li>
                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>