如何为表格单个<td>覆盖table-layout: fixed布局？

我正在做一个设置了table-layout: fixed的表格，点击行时需要展开高度展示更多信息。想要让该行内单个<td>里的<div>占满整个表格宽度，也就是要覆盖这一行的固定表格布局。试了下面的CSS，但没生效，目标<td>还是保持原有尺寸：

table {
  table-layout: fixed;
  width: 75vw;  /* 整个表格宽度75vw；每个单元格约18vw */
}

.expanded {
  width: 75vw !important;  /* 让展开的<td>占满表格宽度 */
}

可行的解决方法： #

• 直接用colspan属性：这是最靠谱的方案，给需要展开的<td>设置colspan值等于表格的总列数。比如表格有4列，就加colspan="4"。不管表格是不是fixed布局，这个单元格都会自动占满整行宽度，不需要额外设置CSS宽度。
• 结合colspan和CSS宽度：如果需要用CSS辅助，给加了colspan的<td>设置width: 100%，此时的100%就对应整个表格的宽度，能确保单元格占满整行。
• 绝对定位内部div：如果不想修改colspan，可以给展开行的<td>设position: relative，然后把里面的<div>设置为position: absolute; left: 0; right: 0; width: 100%;，让div相对于单元格（其实是整个表格行）占满宽度。注意要给展开的行设置足够的min-height或者padding，避免内容溢出干扰其他行。

原方案失效的原因： #

table-layout: fixed模式下，表格的列宽是由表头或第一行的单元格宽度决定的，后续行的单元格单独设置width甚至!important都无法改变整体的列宽分配规则，所以必须通过colspan来突破列的限制。

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