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 ><td >animal Id</td><td >animal name</td><td >cage Number</td><td >legs Number</td><td >delete</td></tr>';

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

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

function creatNewRow () {
tableBody  = '<tr "><td >'   "newRow"   '</td><td >'   "newRow"   '</td><td >'   "newRow"   '</td><td class = "td2">'   "newRow"   '</td><td >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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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