Wide tables differences in Chrome vs Firefox

Description

Initially I asked that question on stackoverflow, however hope to get help here as well.

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.

Expected behavior

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

https://monosnap.com/file/LvtSxXhE5muFpz8aKhTPvbuoNkMOMN

Actual behavior

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

Steps to reproduce the bug

I created a demo hosted on Github Pages, the repo itself. 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.

Questions

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!

Package versions

• Python: 2.7.10
• MkDocs: 1.0.4
• Material: 3.1.0

Project configuration

• GitHub repo with a problem – https://github.com/sspkmnd/mkdocs-table-layout-problem
• Docs itself hosted on GitHub Pages – https://sspkmnd.github.io/mkdocs-table-layout-problem/
• problematic Markdown file
• mkdocs.yml

System information

• OS: Mac OS X 10.14.1
• Browser: Chrome 70.0.3538.110, Firefox Developer Edition 65.0b1

[waylan]

@vijaypolimeru the md-main class is defined at material/base.html#L137. It is simply a class assigned to the main tag:

<main class="md-main" role="main">

Therefore any CSS rule which contains that class will only be applied to content within that tag, but not to content outside of that tag. If you look through that file, you will find various other classes as well. It appears that the theme creators simply chose to prepend each class with md as a stylistic choice. It provides no special meaning other than indicating that the related tag is a tag which wraps the Markdown content at some level.

If you find reading through template files confusing (due the mix of HTML and template code), then I recommend looking through the HTML source of a generated page of your project. Or even better, use your browser’s “inspect” tool to familiarize yourself with the structure of the HTML. The browser’s “inspect” tool also works great for working out which CSS rules are applied to an element and which are overridden due to precedence rules. However, these are general things which apply to any HTML/CSS and are not specific to the Material Theme or even MkDocs. Therefore, this isn’t the place to get help with them.

[waylan]

@squidfunk I understand. I was just reporting my findings while playing around in the inspector. I noted that my changes only seem to make any difference when @sspkmnd’s table-layout: fixed hack was enabled. My testing was by no means exhaustive and I would not be surprised if a different solution was settled on. At least the cause of the bug is known.