Wide table differences in Chrome vs Firefox in mkdocs-material

Question

I am not really a html/css/js guy, but I am doing documentation for one project in MkDocs with Material theme. The problem here is that I have very wide tables and they are displayed differently in Chrome and Firefox, more concrete – they are completely unacceptable in Firefox.

By default Chrome displays tables very nicely, it chooses column widths that look very nice and reasonable:

https://monosnap.com/file/LvtSxXhE5muFpz8aKhTPvbuoNkMOMN

Unfortunately, in Firefox the table overflows the container which I suppose should not happen:

https://monosnap.com/file/u9bAq7pGarmGE5hhgawF84ah451HZz

I tried different solutions to fix this, but in the end was not able to find the way to make it look in Firefox as in Chrome. It seems that Chrome uses some logic to display table in a nice looking way.

The closest I can get to a Chrome version was to use the following css:

table {
  table-layout: fixed;
  max-width: 100%;
}

td {
  word-wrap: break-word;
}

It will force the table to stay inside the container and do not overflow, but how the table chooses widths for columns is not good:

https://monosnap.com/file/SJ6T20vIHpRTW5sy3RAa8RfY1Uchiq

I created a demo hosted on Github Pages: https://sspkmnd.github.io/mkdocs-table-layout-problem (repo – https://github.com/sspkmnd/mkdocs-table-layout-problem) Hope this will help to see the difference. Also, there is a button that changes the style for the table, so you can see the difference between table-layout: fixed; and table-layout: auto; – it is just above the table.

The questions are:

1. Is there a way to make it look in Firefox like in Chrome?
2. Why it overflows the container in Firefox by default? I suppose this should not happen.

PS: I suppose there is a way to set the width explicitly for columns in percent. I tried to achieve so, but I didn't find a way to assign a class to a table <th> via Markdown (which is the source).

Any ideas would be very much appreciated!

Answer 1

Try this:

table {
  table-layout: fixed;
  max-width: 100%;
}

.md-typeset code {
  overflow-wrap: break-word;
}

According to CSS-Tricks, break-word is a "non standard" value only supported by Webkit. However, changing the value to break-all doesn't seem to make a difference to Firefox in my limited tests. On the other hand, overflow-wrap: break-word; seems to do the trick. Note that Firefox still needs table-layout: fixed;. Otherwise it doesn't force the code spans to wrap.