I have a dynamic table whose rows have buttons. I am interested in designing the table as follows:
td
where they are.td
where they are even when I add new buttonsI 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.