DataTables Responsive footer detail

by roedema

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js"></script>
<script src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css">
<div id="container">
    <table id="table" class="display">
        <thead>
            <tr>
                <th>Color</th>
                <th>Column&nbsp;2</th>
                <th>Column&nbsp;3</th>
                <th>Count</th>
            </tr>
        </thead>
        <tfoot class='total'>
            <tr>
                <th>Total</th>
                <th></th>
                <th></th>
                <th>136</th>
            </tr>
            <tr>
                <td>Total</td>
                <td></td>
                <td></td>
                <td>136</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>White</td>
                <td></td>
                <td></td>
                <td>1</td>
            </tr>
            <tr>
                <td>Silver</td>
                <td></td>
                <td></td>
                <td>2</td>
            </tr>
            <tr>
                <td>Gray</td>
                <td></td>
                <td></td>
                <td>3</td>
            </tr>
            <tr>
                <td>Black</td>
                <td></td>
                <td></td>
                <td>4</td>
            </tr>
            <tr>
                <td>Red</td>
                <td></td>
                <td></td>
                <td>5</td>
            </tr>
            <tr>
                <td>Maroon</td>
                <td></td>
               ...

CSS

#container {
    width:320px;
}
#table .total td {
    border-top: 1px solid #111;
    font-weight:bold;
}

JavaScript

$(function () {
    var table = $('#table').DataTable({
        "paging": false,
            "searching": false,
            "responsive": true
    });

    new $.fn.dataTable.FixedHeader(table, {
        "alwaysCloneTop": true
    });
});