1

Tenho um DataTable no qual o Header é contruído usando HTML e as linhas são carregadas e construídas usando JavaScript. Se vcs observarem na imagem, a coluna "Ações" possui um grupo de botões que ficam alinhados verticalmente de forma correta. Só que as demais colunas como "ID" e "Descrição" ficam alinhadas na parte superior da linha. Há outro problema com a altura das linhas... Está muito grande e isso ocupa espaço considerável aa tela.... Dúvidas: 1 - Por que isso ocorre? 2 - É possível alinhar verticalmente usando o JavaScript ou CSS? 3 - É possível diminuir a altura da linha usando o JavaScript ou CSS?

inserir a descrição da imagem aqui

<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"
            }
        }

    });

1
  • é boostrap isso ai neh?
    – novic
    7/07/2018 às 13:40

1 Resposta 1

1

Vc tem que setar vertical-align: middle !important nas th e td

Sobre a altura das linhas isso se deve ao fato da td/th ter um height setado, ou então um padding interno gerando essa altura indesejada. Nesse caso vc pode inspecionar o elemento co o DevToolds do browser para verificar os estilos que estão afetando o elemento.

Exemplo prático, veja os comentários no css OBS: as classes que eu estou usando !important é para sobrescrever os valores default do Bootstrap, mas se vc criar uma classe específica tipo td.minha-tabel vc não deve precisar desse artifício.

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>

3
  • Obrigado @hugocsl pela ótima explicação!!!n :)
    – Master JR
    7/07/2018 às 15:23
  • @JalberRomano legal jovem, só um detalhe, essa propriedade vertical-align: middle não funciona em todos os elementos ok! Vc não vai conseguir alinhar objetos dentro de uma div normal colocando vertical-align: middle no css. Nessa resposta tem mais detalhes sobre isso pt.stackoverflow.com/questions/250262/…
    – hugocsl
    7/07/2018 às 15:25
  • Pode deixar!!! Obrigado pela dica ;)
    – Master JR
    7/07/2018 às 16:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .