jquery – Keep table with minimum height size


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%">
            <th>Start date</th>

            <td>Tiger Nixon</td>
            <td>System Architect</td>


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/


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