Html Chrome与Firefox在mkdocs材质上的巨大差异

我不是一个真正的html/css/js人，但我正在为一个项目编写文档。这里的问题是，我有很宽的表，它们在Chrome和Firefox中的显示方式不同，更具体地说，它们在Firefox中是完全不可接受的

默认情况下，Chrome非常漂亮地显示表格，它选择的列宽看起来非常漂亮和合理：

不幸的是，在Firefox中，表溢出了容器，我认为这是不应该发生的：

我尝试了不同的解决方案来解决这个问题，但最终还是没能找到让Firefox看起来像Chrome一样的方法。Chrome似乎使用了一些逻辑来以一种好看的方式显示表格

最接近Chrome版本的是使用以下css：

表格{
表布局：固定；
最大宽度：100%；
}
运输署{
单词包装：打断单词；
}

它将强制表留在容器内，并且不会溢出，但表选择列宽度的方式并不好：

我在Github页面上创建了一个演示：（repo–）希望这将有助于看到差异。此外，还有一个按钮可以更改表格的样式，因此您可以看到

表格布局：fixed和
表格布局：自动–它就在桌子上方

问题是:

有没有办法让Firefox看起来像Chrome
为什么默认情况下它会溢出Firefox中的容器？我想这不应该发生
PS：我想有一种方法可以显式地设置以百分比表示的列的宽度。我试图做到这一点，但我没有找到一种方法通过标记（这是源代码）将类分配给表

任何想法都将不胜感激
 试试这个：

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

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

据介绍，
break-word
是仅由Webkit支持的“非标准”值。然而，在我有限的测试中，将值更改为
break all
似乎对Firefox没有什么影响。另一方面，
overflow-wrap:break-word似乎起到了作用。注意Firefox仍然需要
表布局：修复。否则，它不会强制代码跨距换行。
我建议使用材质主题。在那里打开了一个问题--感谢您研究这个问题。在相应的GitHub线程中回答您：@waylan，
.md typeset
，为什么在CSS中需要它。在哪里可以找到有关这类前缀的更多详细信息