Feed
This is nice, but I tried to create a colspan and I failed. Is there any way to get it working? Otherwise I will have to use table elements.
Hey Vasan,
Looks very good :-).
I have one problem with this.
By dismissing the table element you are removing all semantic meaning from the code. All elements are places in a div, creating a flat meaningless DOM. The purpose of the table element is to give meaning to the HTML. Screen reader and other assistive technology and search engines know how to read it and understand it.
By flatting it in divs it becomes unreadable by everyone but signed users.
Kind regards, Rian Rietveld
too bad you have to hard code field widths instead of letting them be resized to their content.
In your experience, are there any browser quirks using flexbox ? (Ie11, Microsoft edge, Safari, Firefox)
If you could make it dinamically would be gold. but I think in this way you need to make many settings. It is good for Inspiration. I would love to make it made with vue
The stylish solution!!
Instead 5-line, I'd make something like this:
--------------------------
Header 1 item 1
Header 2 item 2
Header 3 item 3
Header 4 item 4
--------------------------
Header 1 item 1
Header 2 item 2
Header 3 item 3
Header 4 item 4
--------------------------
.
.
.
I really like this idea. I have started to use flexbox to make 2 column lists rather than the float method. Now I like the idea of this table, and I like the way it compresses, but is it possible to use this method on a scrolling table, where the header stays at the top and the data scrolls. I use this kind of table a lot and at the moment I sometimes use css divs or jQuery hacks to get around the problem.
How does the horizontal scrollbar fit into this flex table when the number of columns becomes very large? Also what about fixed columns and fixed rows and their scrolling?
Great work! I'm wondering if it's possible, using this or something similar, to have the header row (rows if wrapped) stay pegged, so for large datasets you can scroll vertically and always have the headers visible.
Why not just apply flexbox CSS styles to <table> and <tr> elements themselves? --> codepen.io/csuwldcat/pen/JGabQV
The problem is that you don't have a table any more. Semantic table markup is important, when you have tabular data, as it describes the meaning of that content. Now you just have a string of meaningless data wrapped in div elements.
I like the idea though and responsive tables as something of an unsolved problem, I wonder if it would be possible to do something similar with semantic markup. It might require display: contents (which is currently only supported in Firefox).
Bráulio Bhavamitra
Developer at Olery
please fix images!