- From: er-parag91 via GitHub <sysbot+gh@w3.org>
- Date: Tue, 11 Feb 2020 03:51:49 +0000
- To: public-css-archive@w3.org
> > It would be nice to make this work:
> > ```
> > <div class="table-wrapper">
> > <table>
> > <tr><th>Foo</th><th>Bar</th></tr>
> > <tr><td>sin</td><td>cos</td></tr>
> > <tr><td>tan</td><td>baz</td></tr>
> > ...
> > </table>
> > </div>
> > ```
> >
> >
> > ```css
> > .table-wrapper {
> > overflow-x: auto;
> > }
> >
> > th {
> > position: sticky;
> > top: 0;
> > }
> > ```
> >
> >
> > [**See demo**](https://codepen.io/valtlai/pen/XVrbPY/left/)
> > I need both horizontal scrolling and sticky header.
>
> Hello. Have you found the solution? I have the same require with yours
I was facing same issue, I did try number of CSS solution and finally it works the way you guys are looking for. Here is working codesandbox URL:
https://codesandbox.io/embed/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark
And I am using react table however CSS styling is pretty easy to understand and Don't thing you would face any issue copying over solution even though you don't know react.
--
GitHub Notification of comment by er-parag91
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/865#issuecomment-584468273 using your GitHub account
Received on Tuesday, 11 February 2020 03:51:51 UTC