It seems to me that within 10 years display: table will be like deprecated and flexbox or CSS grid will take over.
Why would one want to use display: table over flexbox if one considers that all the browsers versions that are targeted by the website support flebox, and if the performance is good?
During some time, display: table had certain things flex did not have.
performance:
In this very old benchmark (2014), there was a performance difference. https://benfrain.com/css-performance-test-flexbox-v-css-table-fight/
But browsers optimize at each update and it will change. And small performance difference may be negligible in most applications.
wider browser support
there are still many browsers in use that don’t support well flexbox.
But this will decrease over time.
a certain way to write the layout that the link above says needs less “CSS code”.
It does not seem very important.
certain features may be missing when looking at details
But there is always a way to live without a feature.
No I doubt it very much (although css doesn’t really get deprecated in the same way as html elements anyway). It will work fine in 10 years time just as it did 10 years ago and just as color and display will work.
Indeed its your grid layout that may not work as the spec is still changing and the next level of subgrids being introduced which may affect the way that sites currently designed work. The same issues arose with flexbox and you still have IE using older versions. If you are talking about longevity then for the next year or so display:table still has the edge.
Display:table is a grid like layout unlike flexbox as flex is linear. You can do things with display:table that can’t be done easily by other methods and uses algorithms that have been present in the browsers since the table layouts of the 1990s.
Just because something is new doesn’t mean you have to use it. You use the tools required for the job in hand whatever you think fits the purpose the best.
By 10 years, and “deprecated”, I meant that flexbox and CSS grid would fit so many use cases, that display: table would gradually be less and less used.
→ In what case would display: table be more suited than flexbox or CSS grid, without considering browser support? Do you have an example?
I added “or CSS grid”, because CSS grid is often quoted as more suited than flexbox for 2 dimensional grids.
Grid can do most of the things that display:table does and a lot more of course but for something simple like this which flex cannot do there seems not point in rolling out the heavy machinery.
In the end they are all tools in the toolbox and as usual with CSS there are often many ways to do the same thing and whether they are right or wrong depends on the job in hand and on personal preference.
Of course things like using floats for columns should be avoided as there are better methods but that doesn’t mean you can’t float something when you need to as neither grid of flex can imitate a float.
