简体   繁体   中英

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>

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM