Keep table with minimum height size

Asked

Viewed 771 times

3

I’m creating a table using the Datatables, but would like to keep a minimum height even when you 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/

jquery table
  • 1

    I guess you could try Style="height='???? px';"

  • @Simple brunão like this, but I did not test in several browsers to see if the result will be as expected, I left in css like this: #example{height: 250px}

  • 1

    @Marcelodiniz please put as answer the solution you found

1 answer

1


As stated in the comments, the answer to the question follows as I resolved.

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

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

Browser other questions tagged jquery table

You are not signed in. Login or sign up in order to post.