Tables cannot be set to 100% width #175

Closed
Tset-Noitamotua opened this Issue Feb 21, 2017 · 9 comments

Comments

Projects
None yet
3 participants
@Tset-Noitamotua

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

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 23, 2017

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@Tset-Noitamotua

Tset-Noitamotua Feb 23, 2017

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

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

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 25, 2017

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 25, 2017

Owner

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

Owner

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 from Q: How can I change the width of tables? to Tables cannot be set to 100% width Feb 25, 2017

@Tset-Noitamotua

This comment has been minimized.

Show comment
Hide comment
@Tset-Noitamotua

Tset-Noitamotua Feb 25, 2017

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

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

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 26, 2017

Owner

Fix released in 1.1.0

Owner

squidfunk commented Feb 26, 2017

Fix released in 1.1.0

@squidfunk squidfunk closed this Feb 26, 2017

@Tset-Noitamotua

This comment has been minimized.

Show comment
Hide comment
@Tset-Noitamotua

Tset-Noitamotua 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

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

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 27, 2017

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@biochimia

biochimia Mar 9, 2018

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment