Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non-responsive tables in API docs #104

Open
xamgore opened this issue Jun 8, 2019 · 2 comments
Open

Non-responsive tables in API docs #104

xamgore opened this issue Jun 8, 2019 · 2 comments
Labels
bug Something isn't working styling CSS-related issues

Comments

@xamgore
Copy link

xamgore commented Jun 8, 2019

Hi, seems that tables are not responsive for mobile clients, I can't scroll it on my phone with the latest chrome. svelte.dev/docs

I see two ways to solve it:

  1. Wrap tables with <div style="overflow-x: scroll">...</div>
  2. Chop table rows down.
@curtisaallen
Copy link

Maybe you can remove the td padding when you get to the mobile break point. Below is the padding that I see being added to the table.

td, th {
text-align: left;
border-bottom: 1px solid #eee;
padding: 0.4rem 0.8rem 0.4rem 0;
}

@antony
Copy link
Member

antony commented Dec 24, 2019

This is the best responsive table I've seen. I'd recommend something like this, which will work on any size screen. https://codepen.io/AllThingsSmitty/pen/MyqmdM

@benmccann benmccann transferred this issue from sveltejs/svelte Dec 15, 2021
@benmccann benmccann added the styling CSS-related issues label Dec 15, 2021
@Rich-Harris Rich-Harris added the bug Something isn't working label Dec 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working styling CSS-related issues
Projects
None yet
Development

No branches or pull requests

5 participants