如何使按钮在动态表格中保持相同的大小

Question

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 1

what about using box-sizing:

box-sizing: border-box;

you can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

Edit: I refactored the code to be like :

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

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

Answer 3

try this

.buttons img{
  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