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

时间:2019-01-16 06:42:27

标签: css flexbox css-tables

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

目标: final goal

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

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

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

0 个答案:

没有答案