How to set table width to 100%

[Sebastian Müller]

Thanks for this awesome piece of code!

I am using this since v1.5 and back then, tables had the same width as text:

I updated to v2.0.3 and all the tables became individual widths:

This could be solved with:

/* maximal table width */
table.markdownTable, table.fieldtable {
  width: 100%;
}
table.markdownTable td:last-child, table.markdownTable th:last-child, table.fieldtable dt:last-child {
  width: 100%;
}

But this hack is not working anymore with v2.1. I am not to much into css, so I would like to see a section about how to modify tables here or at least get some advise what I could do. Maybe I am missing something obvious.

Thanks!

[Sebastian Müller]

But the mentioned hack also just expanded the last column to fill the space. I'd like to expand the cols equally to be 100% of the text width.

[Sebastian Müller]

I guess, I just struggle with markdown tables in general. Reading about it, many people seem to struggle with formatting them.

For now, I reworked all tables and centered them, since I don't think there is an answer to my rather unspecific question.

[jothepro]

If you are still interested in full-width tables. I've figured out that this may work:

.contents table:not(.memberdecls):not(.mlabels):not(.fieldtable):not(.memname) {
    display: block;
}
  
.contents table:not(.memberdecls):not(.mlabels):not(.fieldtable):not(.memname) tbody {
    display: table;
    width: 100%;
}

This restores full-width for markdown and doxygen tables. But apply it with caution! It breaks the overscroll behavior of tables that are wider than the max-content-width. Especially on small screens parts of the table may be hidden!

The problem with tables in this theme is that they technically are not tables. I had to override the default display: table style in order to accomplish the rounded corners and the overflow scrolling behaviour. This is why they are kind of messed up.

Bottom line: I'd recommend to stick with your approach of centering the tables, instead of forcing them to cover the full width!

[Sebastian Müller]

@jothepro thanks for that fix. It works.

I still noticed some problems: Putting tables in <CENTER>...</CENTER>, I faced two problems:

1. all the table content is centered as well (needed to add :--- to align content left)
2. I have to add table{padding:1px;}, otherwise the tables are a tiny bit to wide in mobile view, or borders of wide tables disappear

What is the best way to center a table then?

[jothepro]

Hm, good point. I'll have to dig into that, I cannot come up with an easy solution rn. It should definitely be possible to center the table with <center>. See #91.

[jothepro]

I've added documentation on how to make a table full-width and centered in the latest release v2.2.0.

In case this is still a requirement for you check out the documentation.