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

Question

我有一个动态表，它的行有按钮。 我对设计表格感兴趣，如下所示：

1. 这些按钮将准确填写它们所在的td 。
2. 按钮将保持相同的大小，因此即使我添加新按钮，它们也会继续填充它们所在的td

我尝试了几种方法，但没有任何效果，Lar 能够实现我上面列出的两个条件。 下面是代码。 帮助将不胜感激：

 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

使用 box-sizing 怎么样：

box-sizing: border-box;

你可以在这里了解更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

编辑：我将代码重构为：

.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

尝试这个

.buttons img{
  max-width:100%;
  /*customize your image size here*/
  height:100%;
  /*to control the width of the cell*/
  margin: auto -30px;
}

这是您的代码： https : //codepen.io/weaksou/pen/ExvPqPR