如何使按鈕在動態表格中保持相同的大小

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