3 ms·
I'd love to see a codepen/jsfiddle/gist/whatever that builds out what you describe so it can be compared to the examples on the article?
by GordonS 7y ago
I'd love to see a codepen/jsfiddle/gist/whatever that builds out what you describe so it can be compared to the examples on the article?
- Theodores 7y agoIf you want to give it a go then this is all you need to know to get started... So your starting grid is on the table element - display: grid; grid-template-columns: (depends on your column data, start with '1fr auto auto auto...' with as many autos as you need for your data. Then you need to add display:contents on thead, tbody and tr. If you are using a caption then set that to grid-column: 1 / -1; Your original grid-template-columns for the table can then be modified to suit your data, use 1fr to keep things the same width, 2fr if you want a double standard width column. Then you will need to turn the grid-template-columns definition into a CSS variable, with your desktop layout in the fallback and the variable set by a media query for the responsive view. Give it a go, once you have done it once you will wonder why you did it any other way. There are other things you can do to make a sparse table with some cells taking up multiple rows or columns on an ad-hoc basis. Really, once you have the display:contents trick working for you nicely there is nothing to write a codepen about!