0

I am currently creating flex tables that, for middleware reasons, will still use <table> elements but with flex styling. I would like the ability to have the first and/or last cell of each <tr> span the entire row height while the other items wrap in between.

Goal: final goal

One way to solve this is to switch to a div-based table. The wrapping content is contained in a separate div from the non-wrapping first & last cells, and the child "cells" wrap inside this parent. However this approach causes problems with the existing middleware infrastructure (customer configs, table sorting & paginating, etc). Inserting divs into a <table> structure is also a no-go due to how browsers render <table> elements.

Codepen demo with a responsive table and a desired-end-state div-based table: https://codepen.io/shrakner/pen/xmBQKx

Hopefully there's some flexbox trickery that can accomplish this and I just haven't stumbled across it yet- I'm interested in any suggestions or alternative ways of approaching this problem!

shrakner
  • 43
  • 1
  • 6
  • Did you add an external image? COuld you upload it here directly? – YetAnotherBot Jan 16 '19 at 09:18
  • Also, you could add media property to first and the last child of rows to achieve this. Something like [this](https://codepen.io/BlueSpirit/pen/bOZPKm) – YetAnotherBot Jan 16 '19 at 09:40
  • 1
    Not unless you know the height of each row....https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid – Paulie_D Jan 16 '19 at 12:22

0 Answers0