在表格的行后添加额外的行（或类似行的块），但在？内

Question

我正在寻找一种最终看起来像做某事的方式

<table>
  <tr>
    <td>foo</td>
    <td>baar</td>
  </tr>
  <tr>
    <td colspan="2">foobar</td>
  </tr>
</table>

但实际上是

<table>
  <tr>
    <td>foo</td>
    <td>baar</td>
    <td class="fakerow">foobar</td>
  </tr>
</table>

是否有一种不太怪异的方法？

• 我想保持列对齐。
• 我了解任何正确标记的幼稚选择都是有限的。 <tr><div>
• 我正在通过JavaScript注入新的单元格/行，我想将其嵌套以允许排序和样式化。
• 最好仅使用CSS。
• 最好新行没有固定高度。

我尝试过类似的事情

<tr style="position: relative; padding-bottom: …">
  …
  <td style="display: block; position: absolute; top: 0; right: 0; bottom: 0; height: …">

但在一切都开始起作用之前就变得疯狂了。
无法通过flex（基本上覆盖所有display: table-*样式）来做到这一点，而又不会弄乱列。
Fiddle with my failed attempts。
也许grid？我还没赶上速度。