In table make text size smaller and remove free space (height)

kepsnius

Hi, i have problem with making table text size smaller and remove free space. If i make text small my th like title making small too, but i want leave it same default size, and want remove free space. img bellow

my datatable code

        <style> 
       #calEvents {
      font-size: 11px;

   }
  </style>
<!-- Build datatable -->
<div class="row-90">
    <table class="table display" id="calEvents">
        <thead>

            <tr>
                <th scope="col" style="width: 1%;">ID</th>
                <th scope="col" style="width: 8%;">GROUP</th>
                <th scope="col" style="width: 1%;">WEEKDAY</th>
                <th scope="col" style="width: 6%;">DATE</th>
                <th scope="col" style="width: 10%">TICKER</th>
                <th scope="col" style="width: auto;">EVENT </th>
                <!--<th scope="col">READX</th>  -->       
                <th scope="col" style="width: 9%;">ACTION</th>

            </tr>
        </p>
        </thead>
        <tfoot>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">GROUP</th>
                <th scope="col">WEEKDAY</th>
                <th scope="col">DATE</th>
                <th scope="col">TICKER</th>
                <th scope="col">EVENT </th>
                <!--<th scope="col">READX</th>  -->       
                <th scope="col" >ACTION</th>


            </tr>
        </tfoot>
    </table>
</div>```

My js for data upload

                 var table = $('#calEvents').DataTable( {
                     "processing": true, 
                   "serverSide": false,
                   "order": [[ 3, "asc" ]],
                   "ajax": "app/getdata",
                      'columnDefs': [

         {

           targets: 2, render: function(data1){ return moment(data1).format('dddd')},
        }, //data-toggle="modal" data-target="#exampleModal"
        {
           targets: -1, defaultContent: '<button name="edit" class="btn btn-secondary btn-sm" style="font-size: 0.8em;" type="button">Edit</button>'
             + '&nbsp <button name="delete" class="btn btn-danger btn-sm" style="font-size: 0.8em;" type="button">Delete</button>'
        },
        { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},

    ]


} );```

kthorngren

I did something similar. I used the browser's inspector to see what changes could be made to reduce the height of the table. For my case I came up with this:

  /* Reduce vertical spacing */

  div.dataTables_wrapper div.dataTables_info {
    padding-top: 0px;
  }

  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px 8px 4px 8px;
  }
  /* End Reduce vertical spacing */

This may or may not work in your case but its easy to see what you can do with the browser's inspector tool.

Kevin