how to make buttons stay the same size in a dynamic table

I have a dynamic table whose rows have buttons. I am interested in designing the table as follows:

  1. The buttons will fill in exactly the td where they are.
  2. The buttons will remain the same size so they will continue to fill in the td where they are even when I add new buttons

I tried several methods, but nothing worked and Lar was able to bring about the fulfillment of the two conditions I set out above. Below is the code. help would be very appreciated:

const animals = [{
    "animalId": "1",
    "animalName": "elephent",
    "cageNum": "231",
    "legsNum": "4",
    "CandidatesForDeletion": false
    },
    {
        "animalId": "2",
        "animalName": "tiger",
        "cageNum": "324",
        "legsNum": "56.00",
        "CandidatesForDeletion": false
    },
    {
        "animalId": "3",
        "animalName": "wolf",
        "cageNum": "414",
        "legsNum": "210.40",
        "CandidatesForDeletion": false
    }
]

let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>';

animals.forEach(function(d) {
    tableBody += '<tr class="tr tr2""><td class="td2">' + d.animalId + '</td><td class="td2">' + d.animalName + '</td><td class="td2">' + d.cageNum + '</td><td class = "td2">' + d.legsNum + '</td><td class="td2 buttons">Button</td></tr>';
});

function CreateTableFromJSON() {
    $('#showData').html(tableBody);
}

function creatNewRow () {
tableBody += '<tr class="tr tr2""><td class="td2">' + "newRow" + '</td><td class="td2">' + "newRow" + '</td><td class="td2">' + "newRow" + '</td><td class = "td2">' + "newRow" + '</td><td class="td2 buttons">Button</td></tr>';
}
#table {
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    left: 5%;
    top: 30%;
    width: 90%;
    align-content: center;
    font-size: 12px;
    border-collapse: collapse;
    border: 2px solid black;

}

.tr {

    font-weight: bold;
    border: 2px solid black;
    height: 17%;
}

.tr1 {
    background: #16A1E7;
    height: 80px;
}

.tr2 {
    background: #ffffff;
    transition: 0.4s;
    height: 80px;
     
}

.td1 {
    justify-items: center;
    align-items: center;
    text-align: center;
    color: white;
    border: 2px solid black;
    height: 17%;
}

.td2 {
    justify-items: center;
    align-items: center;
    text-align: center;
    color: black;
    border: 2px solid black;
    height: 17%;
    
     }

.buttons {
    background-color: #ffffff;
    border: 1px solid black;
    border-radius: 3px;
    align-items: center;
    justify-items: center;
    position: absolute;
    transition-duration: 0.4s;
    display: block;
   
}


.buttons:hover {
    background-color: black;
}
<button onclick="CreateTableFromJSON()">Show table</button>
<button onclick="creatNewRow()">New Row</button>
<p id="showData"></p>

Answer

.buttons {
        background-color: #ffffff;
        border: 1px solid black;
        border-radius: 3px;
        transition-duration: 0.4s;
        width: 100%;
        height: 80px;

I removed unnecessary code such as align-items: center; justify-items: center;

justify-items property is not implemented in the flexbox (display: flex;)

I removed: display: block; which is the default value by the browser you don’t need to change it unless you made some changes in the parents. and finally the position: absolute; you could have added a position: relative to the container(parent) . but in your case, you didn’t need a position absolute so better remove it.

 /* position: absolute; */ 
        

then I changed the display to flex so I can control the element content. you can either use display: gird or flex, but I found that flex work better in this case.

         /*change display to flex*/ 
         display: flex;
         /*align as you like*/ 
         align-items: center; 
         justify-content: center;
    }

finally your code look something like this:

.buttons {
            background-color: #ffffff;
            border: 1px solid black;
            border-radius: 3px;
            transition-duration: 0.4s;
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center; 
            justify-content: center;
        }

 .buttons img{
        /*add max-width:100%; to the image to limit its size from going bigger than the table.*/
           max-width:100%;
        /*customize your image size here*/
           height:100%;
        /*to control the width of the cell*/
           margin: auto -30px;
    }

here is your code: https://codepen.io/weaksou/pen/ExvPqPR