为什么Bootstrap表格td内的Font Awesome图标按钮仅在悬停时显示

该异常属于典型的样式优先级冲突问题，大概率是项目中存在针对表格单元格子元素的默认隐藏规则：常见为给表格操作列/最后一列的按钮设置了默认opacity:0或visibility:hidden，仅在整行被鼠标悬停时才设置为可见状态。按钮直接挂载到tr下时不受这类针对td子元素的规则约束，因此显示正常。
少数情况下也可能是按钮放入td后，单元格宽度被同行列的输入框挤压，导致按钮默认被溢出隐藏，悬停时样式变化才触发显示。

按优先级依次尝试即可：

• 方案1：使用Bootstrap自带工具类强制按钮始终可见，直接修改按钮创建代码的class属性即可：

let newBtn = createAnyElement("button", {
    class: "btn btn-success opacity-100 position-relative",
    onclick: "createUser(this)"
});

• 方案2：给包裹按钮的td设置最小宽度，避免单元格挤压导致按钮隐藏：

let td = createAnyElement("td", {
    style: "min-width: 70px; text-align: center;"
});
td.appendChild(newBtn);
tr.appendChild(td);

• 方案3：排查项目全局样式，删除针对table td > button、tr td:last-child设置的默认隐藏、透明相关规则即可。

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