Tables cannot be set to 100% width

[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

Cheers
Tset

[squidfunk]

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]

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

[squidfunk]

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:

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]

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

[Tset-Noitamotua]

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

[squidfunk]

Fix released in 1.1.0

[Tset-Noitamotua]

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

[squidfunk]

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]

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

[rjpereira]

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]

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]

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;
}