Bootstrap 4中如何避免表格td按钮点击后单元格合并

你遇到的“单元格合并”视觉问题，其实是Bootstrap的btn类和表格单元格默认布局规则冲突导致的：

Bootstrap的btn类自带display: inline-block样式，而表格<td>元素默认是display: table-cell——当你给<td>直接加上btn类后，这个display属性被覆盖，彻底破坏了表格的原生布局逻辑，导致同一行的单元格不再按照表格列宽规则排列，视觉上就出现了错乱的“合并”效果。

下面给你两种可行的解决思路：

方案一：在<td>内嵌套<button>（推荐） #

这种方法既保留表格的正常布局，又能完美复用Bootstrap的按钮样式，是最稳妥的做法：

修改后的HTML #

<table class="table table-bordered table-sm table-hover">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">1</th>
    <th scope="col">2</th>
    <th scope="col">3</th>
    <th scope="col">4</th>
    <th scope="col">5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td id="x4y3" name="x4y3"><button class="btn btn-danger w-100 h-100" value="-1">_</button></td>
    <td id="x2y3" name="x2y3"><button class="btn btn-danger w-100 h-100" value="-1">_</button></td>
  </tr>
</tbody>
</table>

修改后的JS #

$("table").on("click", "td", function() {
  const btn = $(this).find('button');
  let val = parseInt(btn.attr('value'));
  
  // 处理非法值
  if (isNaN(val) || val > 1 || val < -1) {
    val = 1;
    btn.attr('value', val).removeClass().addClass('btn btn-success').text('✓');
  } else {
    switch(val) {
      case -1:
        val = 0;
        btn.attr('value', val).removeClass().addClass('btn btn-secondary').text('-');
        break;
      case 0:
        val = 1;
        btn.attr('value', val).removeClass().addClass('btn btn-success').text('✓');
        break;
      case 1:
        val = -1;
        btn.attr('value', val).removeClass().addClass('btn btn-danger').text('_');
        break;
    }
  }
});

补充CSS（让按钮完全填满单元格） #

td button {
  border: none;
  border-radius: 0; /* 去掉按钮默认圆角，和表格边框对齐更自然 */
}

方案二：自定义CSS修复布局冲突 #

如果你不想嵌套按钮，也可以通过自定义CSS覆盖btn类的display属性，强制保留表格单元格的布局：

新增自定义CSS #

.btn-table-cell {
  display: table-cell !important;
}

修改JS中的类添加逻辑 #

在给<td>添加Bootstrap按钮类的时候，同时加上这个自定义类：

// 示例：在case -1的分支中修改
$(this).addClass('btn btn-secondary btn-table-cell');
// 其他分支同理，替换对应的按钮类即可

不过这种方法可能会和Bootstrap按钮的其他样式（比如内边距、对齐方式）产生细微冲突，优先推荐方案一。

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