表格rowspan>1时子div无法铺满父td高度？求排查原因

这种情况我之前踩过好几次坑，结合你给出的代码和「测试环境正常、项目环境失效」的差异，大概率是下面几个常见因素导致的，不用急着翻整个代码库，先从这些点入手排查：

1. 表格布局模式的差异 #

测试环境可能默认使用浏览器自带的table-layout: auto（自动布局），但项目里可能全局配置了table-layout: fixed（固定布局），或者某个父级表格被设置了这个属性。当表格用固定布局时，带rowspan的单元格高度计算逻辑会发生变化，导致内部绝对定位的.CoolButton无法正确识别td的实际高度。

排查方法：打开浏览器开发者工具，查看目标表格的computed样式，确认table-layout的值。如果是fixed，可以给这个表格单独设置：

.your-table-class {
  table-layout: auto;
}

2. td的relative定位被覆盖 #

你的代码里给td设置了position: relative，这是内部绝对定位元素能基于td定位的前提。但在动态创建表格的场景中，项目里可能有其他样式（比如全局td样式、表格插件的默认样式）覆盖了这个属性，导致.CoolButton的定位基准变成了更上层的元素（比如table或者body），自然没法铺满td。

排查方法：检查目标td的computed样式，确认position是否为relative。如果被覆盖，可以提高样式优先级：

td[rowspan] {
  position: relative !important; /* 临时测试用，后续建议用更具体的选择器 */
}

3. 继承高度的逻辑失效 #

你给.CoolButtonInner设置了height: inherit，但它的父元素.CoolButton是绝对定位元素，默认height: auto不会继承td的高度——所以这里的inherit其实继承的是.CoolButton的高度，而非td的。测试环境可能刚好因为其他样式让.CoolButton撑满了td，但项目里没有这个触发条件。

修复思路：跳过继承，直接让.CoolButtonInner铺满.CoolButton：

.CoolButtonInner {
  background-color: pink;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

同时确保.CoolButton的定位正确（已经设置了top:0;bottom:0;position:absolute）。

4. 动态渲染的时机问题 #

测试环境是静态HTML，表格的rowspan高度在页面加载时就被浏览器计算完成了；但项目里是动态创建表格，可能在渲染.CoolButton的时候，表格还没完全渲染完毕，td的实际高度还没被浏览器计算出来，导致绝对定位元素的高度无法正确拉伸。

排查方法：把渲染按钮的逻辑延迟到表格布局稳定之后，比如：

// 假设你用动态创建的方式插入表格
renderTable().then(() => {
  // 表格渲染完成后再插入按钮元素
  insertCoolButtons();
});

或者用setTimeout做临时测试（不推荐长期使用，但能快速验证问题）。

5. 全局样式的优先级覆盖 #

项目里可能存在优先级更高的样式，比如全局的td a选择器、或者其他组件库的样式，覆盖了你写的.CoolButton的属性（比如把position:absolute改成了display: inline-block，或者重置了top/bottom值）。

排查方法：用开发者工具查看.CoolButton的computed样式，看有没有样式被划掉（表示被更高优先级的样式覆盖）。如果有，要么提高你的样式优先级：

td .CoolButton {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* 加上left/right确保宽度也铺满 */
}

要么临时加!important验证问题（不推荐长期使用，避免样式冲突）。

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