How to make the button occupy all the height and width of its parent element?

Question

Hello.

I have a table that is dynamically populated with data coming from the Mysql database. For this I use AJAX and PHP.

I have the following question: How do I make a button (which is actually one with classes that give it button characteristics) occupy all the height and width of what it is inside.

For now it’s like this:

Only that I would like that "CHANGE" button to fill in all the space that it’s inside.

Below is the code of creation of this Table:

function preencher_funcionarios() {
  $.ajax({
    //dataType: "json",
    type: "POST",
    url: "banco/banco-vision/pagina-cadastrar-funcionarios/preencher-funcionarios.php",
    cache: false,

  }).done(function(data) {
    var funcionarios = "";

    $.each($.parseJSON(data), function(chave, func) {
      //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 

      funcionarios += '<tr id="' + func.codigo + '">';

      funcionarios += '<td>' + func.imagem + '</td>';
      funcionarios += '<td>' + func.usuario + '</td>';
      funcionarios += '<td>' + func.EMPRESA_ORIGEM + '</td>';
      funcionarios += '<td>' + func.departamento + '</td>';
      funcionarios += '<td>' + func.email + '</td>';
      funcionarios += '<td style="text-align: center;"><a class="btn btn-md btn-success" href="#" data-toggle="modal" data-target="#modal-alterar-funcionarios">ALTERAR</a></td>';

      funcionarios += '</tr>';

    });

    $('#registros-funcionarios-cadastrados').html(funcionarios);


  }).fail(function() {
    alert('Falha na listagem dos usuários');

  }).always(function() {

  });
}

html,
body {
  background: linear-gradient(to left, rgba(4, 27, 29, 1)100%, rgba(64, 64, 64) 100%);
  color: rgb(255, 250, 240);
}

.container-fluid {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div#row-filtros-funcionario {
  margin-top: 0%;
  color: rgba(211, 211, 211);
}

div#div-titulo-funcionarios h2 {
  color: GhostWhite;
  font-weight: bold;
  font-family: roboto;
  text-align: center;
  margin-bottom: 0;
}

div#formulario-alterar-funcionarios {
  margin-top: 2%;
  border: 1px solid grey;
}

div#listagem-funcionarios {
  margin-top: 3%;
  margin-bottom: 0%;
  padding: 0;
  padding-top: 0%;
  height: 440px;
  overflow-y: scroll;
  background: rgb(235, 235, 235);
}

div#listagem-funcionarios tr {
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
  cursor: pointer;
}


/* Deixando o Cabeçalho da tabela (thead) fixo Stackoverflow*/

.table {
  overflow: scroll;
}

div#listagem-funcionarios th {
  position: sticky;
  padding-bottom: -10px;
  z-index: 0;
  background: rgb(47, 70, 116);
  /* box-shadow: 0 1px 0 0 #ddd, 0 -5px 0 0 #fff; */
  height: 40px;
  color: white;
  font-family: Sans-serif;
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  top: -1.3px;
}

div#modal-incluir-funcionarios {
  color: black;
}

div#modal-alterar-funcionarios {
  color: black;
}

div#modal-header-alterar {
  background-color: rgba(60, 179, 113);
  color: GhostWhite;
}

div#incluir-novo-funcionario {
  background: rgb(235, 235, 235);
  padding: 2% 0 0.5% 0;
}

Thank you!

Answer 1

You can add the style directly to HTML, or create a class for it. I’ll leave the two forms.

funcionarios += '<td style="text-align: center; padding: 0px"><a style="width: 100%; height: 100%;" class="btn btn-md btn-success" href="#" data-toggle="modal" data-target="#modal-alterar-funcionarios">ALTERAR</a></td>';

To add via class. Create the class in your files .css.

.full-size {
    width: 100%;
    height: 100%;
}

Then simply add the class to the dynamic element.

funcionarios += '<td style="text-align: center; padding: 0px"><a class="btn btn-md btn-success full-size" href="#" data-toggle="modal" data-target="#modal-alterar-funcionarios">ALTERAR</a></td>';