我懂你的痛点——直接把按钮塞进现有表格行的<td>里会继承行的样式，单独加一行又会跑到目标行下面，没法对齐。这里给你三个从简单到灵活的解决方案，按需选择：

方案1：直接重置按钮样式（最简单，推荐） #

不需要新增行，直接把按钮放在目标行的<td>里，然后用CSS重置按钮的继承样式，自定义你想要的外观：

代码示例： #

CSS：

/* 给按钮单独设置样式，覆盖继承的表格行样式 */
.table-action-btn {
  all: unset; /* 一键重置所有继承的样式 */
  padding: 6px 12px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.table-action-btn:hover {
  background-color: #0056b3;
}

JavaScript：

当条件满足时，直接给目标行的<td>追加按钮：

// 假设targetRow是你选中的目标表格行
const btn = document.createElement('button');
btn.textContent = '操作';
btn.className = 'table-action-btn';

// 把按钮加到目标行的最后一个td，或者新建一个td来放
const newTd = document.createElement('td');
newTd.appendChild(btn);
targetRow.appendChild(newTd);

这个方案最省心，既不用改表格布局，又能彻底避免样式继承问题。

方案2：CSS绝对定位按钮（适合需要按钮悬浮在行右侧的场景） #

如果希望按钮不占用表格列的空间，悬浮在目标行的右侧，可以用定位实现：

代码示例： #

CSS：

/* 给目标行设置相对定位，作为按钮的定位基准 */
.target-table-row {
  position: relative;
}

/* 按钮容器，用来定位 */
.btn-wrapper {
  position: absolute;
  top: 50%;
  right: 15px; /* 调整和右侧的距离 */
  transform: translateY(-50%); /* 垂直居中对齐行内容 */
}

/* 按钮样式，同样重置继承样式 */
.btn-wrapper button {
  all: unset;
  padding: 5px 10px;
  background: #dc3545;
  color: white;
  border-radius: 3px;
  cursor: pointer;
}

JavaScript：

const targetRow = document.querySelector('.target-table-row');
const btnWrapper = document.createElement('div');
btnWrapper.className = 'btn-wrapper';

const btn = document.createElement('button');
btn.textContent = '删除';
btnWrapper.appendChild(btn);

targetRow.appendChild(btnWrapper);

方案3：Grid布局重构表格（适合复杂的行横向排列需求） #

如果你的场景需要多个行横向并排，可以把表格改成Grid布局，自定义行和列的排列：

代码示例： #

CSS：

/* 把表格改成Grid布局 */
.custom-table {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列放内容，第二列放按钮行 */
  gap: 20px; /* 内容和按钮的间距 */
  width: 100%;
}

/* 让tr不成为Grid项，直接让td参与布局 */
.custom-table tr {
  display: contents;
}

/* 内容行的td占满第一列 */
.content-row td {
  grid-column: 1;
}

/* 按钮行的td放在第二列，垂直居中 */
.button-row td {
  grid-column: 2;
  align-self: center;
}

/* 按钮样式 */
.button-row button {
  all: unset;
  padding: 6px 12px;
  background: #28a745;
  color: white;
  border-radius: 4px;
}

HTML/JavaScript：

<table class="custom-table">
  <!-- 目标内容行 -->
  <tr class="content-row">
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <!-- 动态添加的按钮行 -->
  <tr class="button-row">
    <td><button>编辑</button></td>
  </tr>
</table>

用JS添加按钮行时，给tr加上button-row类即可。

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