如何让动态表格内的按钮固定尺寸且始终填满所在td单元格

问题核心原因 #

• 错误将按钮样式类.buttons绑定在了td元素上，而非实际的按钮元素
• 给td设置了position: absolute导致单元格脱离正常文档流，布局错乱
• 表格未设置table-layout: fixed，列宽会随内容动态变化，无法保证按钮尺寸统一

修复步骤 #

1. JS逻辑调整 #

生成行时，在按钮列插入独立的<button>元素，而不是直接在td里写文本，将.buttons类绑定到按钮元素上

2. CSS样式调整 #

• 给表格添加table-layout: fixed属性，固定列宽，避免新增行后列宽变化
• 移除td上的position: absolute属性，恢复单元格正常布局
• 给按钮设置width: 100%; height: 100%，自动填满父级td

3. 可选优化 #

给按钮列设置固定宽度，保证所有行的按钮尺寸完全一致

完整修改后代码 #

HTML #

<button onclick="CreateTableFromJSON()">Show table</button>
<button onclick="creatNewRow()">New Row</button>
<p id="showData"></p>

CSS #

#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;
    table-layout: fixed; /* 固定列宽 */
}

.tr {
    font-weight: bold;
    border: 2px solid black;
}

.tr1 {
    background: #16A1E7;
    height: 80px;
}

.tr2 {
    background: #ffffff;
    transition: 0.4s;
    height: 80px;
}

.td1 {
    text-align: center;
    color: white;
    border: 2px solid black;
}
/* 给按钮列设置固定宽度 */
.td1:last-child, .td2:last-child {
    width: 100px;
}

.td2 {
    text-align: center;
    color: black;
    border: 2px solid black;
    padding: 0; /* 去掉td内边距，避免按钮和单元格有间隙 */
}

.buttons {
    background-color: #ffffff;
    border: none; /* 去掉按钮默认边框，复用td边框 */
    border-radius: 3px;
    transition-duration: 0.4s;
    display: block;
    width: 100%; /* 宽度填满父级td */
    height: 80px; /* 和行高保持一致，填满高度 */
    cursor: pointer;
}

.buttons:hover {
    background-color: black;
    color: white;
}

JS #

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) {
    // 插入带buttons类的按钮元素
    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"><button class="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"><button class="buttons">删除</button></td></tr>';
}

内容的提问来源于stack exchange，提问作者Mike Hemilton