如何让粘性定位（sticky）的TD子元素占满单元格高度？

我有一个表格，其中第一列的<TD>设置了position: sticky（粘性定位），需要让单元格内的多个子元素占满单元格的全部高度。

通常我会给<TD>设置position: relative，子元素设置absolute，但由于<TD>需要保持粘性定位，该方法不可行。同时也无法使用display: table-*的<DIV>来替代，因为需要用到colspan属性。

示例代码 #

CSS #

TD:nth-child(1) {
  position: sticky;
  left: 0px;
}
SPAN {
  display: inline-block;
  width: 5px;
  background-color: red;
  margin-right: 1em;
}

HTML #

<TABLE>
  <TR>
    <TD>
    <SPAN>&#x200B;</SPAN><SPAN>&#x200B;</SPAN><LABEL>Other contents</LABEL>
    </TD>
    <TD>Multiline<BR>contents
    </TD>
  </TR>
</TABLE>

请问我是否遗漏了什么可行的实现方式？

以下几种方法可以在保留position: sticky和colspan功能的前提下，让子元素占满单元格高度：

方法1：Flexbox布局 #

给粘性定位的<TD>启用Flex布局，利用Flex的自动拉伸特性让子元素填满高度：

TD:nth-child(1) {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center; /* 可选，让内容垂直居中 */
  gap: 1em; /* 替代margin-right，更灵活的间距控制 */
}
SPAN {
  width: 5px;
  background-color: red;
  /* Flex子元素默认会拉伸填满父元素高度，无需额外设置 */
}

Flex布局完全兼容position: sticky，也不会影响表格的colspan属性。

方法2：Grid布局 #

如果需要更复杂的子元素排列，Grid布局同样适用：

TD:nth-child(1) {
  position: sticky;
  left: 0;
  display: grid;
  grid-auto-flow: column; /* 让子元素横向排列 */
  align-items: center;
  gap: 1em;
}
SPAN {
  width: 5px;
  background-color: red;
  height: 100%; /* 或者依赖Grid的自动拉伸 */
}

Grid的高度拉伸机制能很好适配单元格的动态高度，和粘性定位无冲突。

方法3：inline-block + 100%高度 #

通过设置单元格和子元素的高度为100%实现填充：

TABLE {
  border-collapse: collapse; /* 确保单元格高度计算准确 */
}
TD:nth-child(1) {
  position: sticky;
  left: 0;
  height: 100%;
}
SPAN {
  display: inline-block;
  width: 5px;
  background-color: red;
  margin-right: 1em;
  height: 100%;
  vertical-align: middle; /* 可选，调整内容垂直对齐 */
}

注意需要给表格设置border-collapse: collapse，避免单元格高度计算出现偏差。

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