我当前正在创建flex表,由于中间件的原因,这些表仍将使用<table>
元素,但具有flex样式。我希望能够使每个<tr>
的第一个和/或最后一个单元格跨越整个行的高度,而其他项目则介于它们之间。
目标:
解决此问题的一种方法是切换到基于div的表。包装内容包含在与非包装的第一个和最后一个单元格分开的div中,子级“单元格”包装在此父级内部。但是,这种方法会导致现有中间件基础结构出现问题(客户配置,表排序和分页等)。由于浏览器呈现<table>
元素的方式,将div插入<table>
结构也是不可行的。
Codepen演示,其中包含一个响应表和一个基于div的最终目的状态表:https://codepen.io/shrakner/pen/xmBQKx
希望有一些可以实现此目的的flexbox技巧,但我还没有偶然发现它-我对解决此问题的任何建议或替代方式感兴趣!