Vertically align data from a line into a datatable

Question

I have a Datatable where Header is built using HTML and lines are loaded and built using Javascript. If you observe in the image, the "Actions" column has a group of buttons that are aligned vertically in a correct way. Only other columns like "ID" and "Description" are aligned at the top of the row. There is another problem with the height of the rows... It is very big and it takes considerable space to screen.... Doubts: 1 - Why does this occur? 2 - Is it possible to align vertically using Javascript or CSS? 3 - You can decrease the line height using Javascript or CSS?

<table id="dtPrincipal" class="table table-striped table-bordered center-header" cellspacing="0" width="100%">
                <thead class="bg-blue-grey-100">
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            Descrição
                        </th>
                        <th>
                            Ações
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

function dataTablePrincipalLoad() {

    $('.dataTables_filter input').attr('placeholder', 'Search...').hide();
    var table = $("#dtPrincipal").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        //"dom": '<"top"i>rt<"bottom"lp><"clear">',
       // "ordering": false,
        "ajax": {
            "url": '/pessoa-situacao-gerenciar/getPessoaSituacao',
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [
            //Estilos Das Colunas
            { className: "align-center", "targets": [0] },
            { className: "align-center", "targets": [2] },

            //Largura das Colunas
            { width: 100, targets: 0 },
            { width: 100, targets: 2 }
        ],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "descricao", "name": "Descricao", "autoWidth": true },
            {
                 "render": function (data, type, full, meta) {
                     return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a class="btn btn-sm btn-icon btn-default btn-outline" title="Visualizar/Editar" data-modal=""><i class="icon wb-edit" aria-hidden="true"></i></a><a class="btn btn-sm btn-icon btn-default btn-outline" title="Excluir"  data-modal=""><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><a title="Mais Ações" class="btn btn-sm btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-grid-4" aria-hidden="true"></i></a><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>'
                } 
            }            
        ],
        "language": {
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar",
            "searchPlaceholder": "Digite algo...",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            }
        }

    });

Answer 1

You have to set vertical-align: middle !important in th and td

About the height of the lines this is due to the fact of the td/th have a height set, or else a padding internal generating this unwanted height. In this case you can inspect the browser’s Devtoolds co element to check the styles that are affecting the element.

Practical example, see the comments in css OBS: the classes I’m using !important is to overwrite the values default Bootstrap, but if you create a specific type class td.minha-tabel You shouldn’t need that trick.

th, td{
    vertical-align: middle !important; /* alinha verticalmente */
    height: 36px; /* altura customizada da celula */
    padding: 0 16px !important; /* 0 de padding na vertical e 16px na horizontal */
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<table id="dtPrincipal" class="table table-striped table-bordered center-header" cellspacing="0" width="100%">
    <thead class="bg-blue-grey-100">
        <tr>
            <th>
                ID
            </th>
            <th>
                Descrição
            </th>
            <th>
                Ações
            </th>
        </tr>
        <tr>
            <td>
                ID
            </td>
            <td>
                Descrição
            </td>
            <td>
                Ações
            </td>
        </tr>
    </thead>
    <tbody></tbody>
</table>