表格行悬停时采用flex布局的最后一列出现空白问题如何解决？

该空白是直接修改<td>的display属性破坏原生表格渲染规则导致的：

• 原生<td>默认display属性为table-cell，会自动占满所属表格列的全部宽度，hover时设置的背景色可以完整覆盖整个列区域
• 你直接给<td>设置display: flex后，该元素不再具备table-cell的布局特性，宽度默认由内部内容撑开。如果表格最后一列的列宽被其他行的更宽内容撑大，当前行的flex td宽度就会小于列宽，未被td覆盖的区域会显示表格的默认背景，hover时就出现了明显的空白区域。

优先推荐第一种无兼容问题的方案：

方案1（最稳妥）：不修改td的原生display属性，新增内部flex容器 #

把flex相关的样式转移到td内部的子元素上，保留td的原生table-cell特性，示例代码如下：

<td>
  <div class="d-flex flex-end">buttons here</div>
</td>

对应CSS调整如下，把原来加在td上的padding规则移到内部flex容器上即可：

.flex-end {
    justify-content: flex-end;
}
.d-flex {
    padding: 0!important;
    display: flex;
    width: 100%;
    /* 若需要和其他td内容上下对齐，可在这里补充和其他td一致的上下padding值 */
}

该方案完全不破坏表格原生布局逻辑，不会引发其他表格渲染异常。

方案2：强制让flex属性的td占满列宽 #

如果你必须直接给td设置flex布局，可以给.d-flex类补充width: 100%属性，强制td撑满所属列的全部宽度：

.d-flex {
    padding: 0!important;
    display: flex;
    width: 100%; /* 新增这行 */
}

该方案在部分老旧浏览器上可能存在表格高度、宽度计算的兼容问题，更推荐使用方案1。

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