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

Tables cannot be set to 100% width #175

Closed
Tset-Noitamotua opened this issue Feb 21, 2017 · 12 comments
Closed

Tables cannot be set to 100% width #175

Tset-Noitamotua opened this issue Feb 21, 2017 · 12 comments
Assignees
Milestone

Comments

@Tset-Noitamotua
Copy link

@Tset-Noitamotua Tset-Noitamotua commented Feb 21, 2017

How can I make the generated tables have the same width as other boxes - e.g. use all the space until the green line in screenshot below

image

Cheers
Tset

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 23, 2017

Tables are a bit hacky in Material, due to the way overflow is handled on small screens. I will investigate, but it may take some time. Just setting the table to 100% doesn't do the trick, obviously.

@Tset-Noitamotua
Copy link
Author

@Tset-Noitamotua Tset-Noitamotua commented Feb 23, 2017

I hoped that adding custom stylesheet through extra_css would do the trick :)

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 25, 2017

I refactored table styling in #185. Setting tables to full-width is now as easy as:

.md-typeset__table {
   min-width: 100%;
}

However, doing this you lose one thing: the right padding on overflowing tables on mobile - the red area will not be there anymore, thus resulting in the table having no right padding when overflowing:

bildschirmfoto 2017-02-25 um 11 31 56

The default way how tables behave is unaltered, so there are no changes for users that don't override md-typeset__table with their own CSS.

@squidfunk squidfunk closed this Feb 25, 2017
@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 25, 2017

Closed the issue again, duh. I reopen it and leave it open until it is released.

@squidfunk squidfunk reopened this Feb 25, 2017
@squidfunk squidfunk self-assigned this Feb 25, 2017
@squidfunk squidfunk added this to the 1.1.0 milestone Feb 25, 2017
@squidfunk squidfunk changed the title Q: How can I change the width of tables? Tables cannot be set to 100% width Feb 25, 2017
@Tset-Noitamotua
Copy link
Author

@Tset-Noitamotua Tset-Noitamotua commented Feb 25, 2017

Great! I'll try it out then back in office on monday.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 26, 2017

Fix released in 1.1.0

@squidfunk squidfunk closed this Feb 26, 2017
@Tset-Noitamotua
Copy link
Author

@Tset-Noitamotua Tset-Noitamotua commented Feb 27, 2017

It's really as easy as adding following lines to extra.css refered in mkdocs.yml:

.md-typeset__table {
   min-width: 100%;
}

In Chrome I had to clear the browser cache to see the change take effect.

I like it! Thanks a lot @squidfunk

image

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 27, 2017

In Chrome I had to clear the browser cache to see the change take effect.

This is almost certainly not related to Material but to your extra_css which has no revision appended for cache busting.

@biochimia
Copy link

@biochimia biochimia commented Mar 9, 2018

Is there a reason why the suggested fix can't be applied in the base theme only for non-mobile devices?

@rjpereira
Copy link

@rjpereira rjpereira commented Apr 20, 2020

Hi. This fix used to work with 4.6.3 but now that I upgraded to 5.1.1. seems broken again. Any recommendation on how to get the 100% width tables with 5.1.1 ? Thanks

@martinbira
Copy link
Contributor

@martinbira martinbira commented Apr 20, 2020

Hi. This fix used to work with 4.6.3 but now that I upgraded to 5.1.1. seems broken again. Any recommendation on how to get the 100% width tables with 5.1.1 ? Thanks

In your extra_css you can override the default display setting as follows:

.md-typeset table:not([class]) {
    display: table;
}
@rjpereira
Copy link

@rjpereira rjpereira commented Apr 20, 2020

Thanks. To be clear for others, it worked properly when both are in extra_css:

.md-typeset__table {
   min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.