kevquirk
Fix table ignoring width
With display: block, a table doesn't stretch to the whole box. CSS width property is completely ignored if it's a block.
Deploy Preview for simplecss-cdn ready!
| Name | Link |
|---|---|
| Latest commit | 867b9fa9d473c03b81e08cf0c0c1377bd64f594f |
| Latest deploy log | https://app.netlify.com/sites/simplecss-cdn/deploys/6402a70d5baa440008b7298f |
| Deploy Preview | https://deploy-preview-104--simplecss-cdn.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
I'm not happy with the way we style tables right now, as there's accessibility concerns with setting display: block on <table>, but then we get overflowing tables, like the screenshot below with your change:
I think the best fix while still having scrolling tables when too large would be to merge your change (display: table, as Bob intended) and have users wrap their tables in <figure> elements—but this approach would be a breaking change, so I think we should postpone this until the next minor version (and write the appropriate documentation).
Would using display:table; and wrapping the table inside a div work? That should stop it scrolling, right?
Would using
display:table;and wrapping the table inside adivwork? That should stop it scrolling, right?
Yes, that will stop the table itself from scrolling. Then you'd set overflow-x: scroll on the <div> or <figure>.
More thoughts on this: I'm debating which element would make more sense: <div> or <figure>.
I think <div> would result in unwanted scrolling, while <figure> is more deliberate. <figure> is also the pattern used by pico.css.
I've just tested it (quickly, and only on Safari) and both div and figure appear to display in the same way - they scroll off screen with a scroll bar.. I'm happy to go either way, personally. Ultimately, it's only for the demo, folk who use it can decide how best they would like to use a table on their project.
Went with figure as the horizontal scrolling utility element. Initially tried :has but unfortunately it's too new, and Gecko is lagging behind on implementation.
Pending merge, I'll update the docs with the new utility.
Thoughts?