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 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 link