jquery – Keep table with minimum height size

Question:

I'm creating a table using Datatables , but I'd like to keep a minimum height even when I have at least one record.

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>

    </tbody>
</table>

and the JS

var nTrs = $('#example tbody tr');
if (typeof document.getElementsByTagName('td')[0] != 'undefined'){
    var iColspan = nTrs[0].getElementsByTagName('td').length;
}

var oTable = $('#example').dataTable({
    "columnDefs": [
        { "visible": false, "targets": 2 },
        ],
        "order": [[ 2, 'asc' ],[ 0, 'asc' ]],
    "orderFixed": [ 2, 'asc' ],
    "lengthChange": false,
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,
    "info": false,

    "drawCallback": function ( settings ) {
        var api  = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last = null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="'+ (iColspan-1) +'" class="info">' + group + '</td></tr>'
                    );

                    last = group;
                }
            });
        }
});

the example can be seen here https://jsfiddle.net/53q66vrt/

Answer:

As was given in response in the comments, below is the answer to the question as I solved it.

In CSS I put #example{height: 250px} and that solved the problem.

Here is an example at https://jsfiddle.net/33hqd5m1/

Scroll to Top