创建行尾“单元格”，该行单元格使用Flex表格“行高”的100％，而不考虑其他项目的Flex包装

Question

我当前正在创建flex表，由于中间件的原因，这些表仍将使用<table>元素，但具有flex样式。我希望能够使每个<tr>的第一个和/或最后一个单元格跨越整个行的高度，而其他项目则介于它们之间。

目标：

解决此问题的一种方法是切换到基于div的表。包装内容包含在与非包装的第一个和最后一个单元格分开的div中，子级“单元格”包装在此父级内部。但是，这种方法会导致现有中间件基础结构出现问题（客户配置，表排序和分页等）。由于浏览器呈现<table>元素的方式，将div插入<table>结构也是不可行的。

Codepen演示，其中包含一个响应表和一个基于div的最终目的状态表：https://codepen.io/shrakner/pen/xmBQKx

希望有一些可以实现此目的的flexbox技巧，但我还没有偶然发现它-我对解决此问题的任何建议或替代方式感兴趣！