mkdocs-material 中 Chrome 与 Firefox 的广泛表差异

Question

我并不是真正的 html/css/js 专家，但我正在为 MkDocs 和 Material theme 中的一个项目做文档。这里的问题是我有非常宽的表格，它们在 Chrome 和 Firefox 中的显示方式不同，更具体地说——它们在 Firefox 中是完全不可接受的。

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

https://monosnap.com/file/LvtSxXhE5muFpz8aKhTPvbuoNkMOMN

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

https://monosnap.com/file/u9bAq7pGarmGE5hhgawF84ah451HZz

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

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

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

td {
  word-wrap: break-word;
}

它会强制表格留在容器内，不会溢出，但是表格如何选择列的宽度并不好：

https://monosnap.com/file/SJ6T20vIHpRTW5sy3RAa8RfY1Uchiq

我在 Github 页面上创建了一个演示：https://sspkmnd.github.io/mkdocs-table-layout-problem（repo – https://github.com/sspkmnd/mkdocs-table-layout-problem）希望这将有助于看到差异。另外，还有一个按钮可以改变表格的样式，所以你可以看到table-layout: fixed;和table-layout: auto;之间的区别——它就在表格的上方。

问题是：

1. 有没有办法让它在 Firefox 中看起来像在 Chrome 中一样？
2. 为什么默认会溢出 Firefox 中的容器？我想这不应该发生。

PS：我想有一种方法可以明确地以百分比为列设置宽度。我试图做到这一点，但我没有找到通过 Markdown（这是源代码）将类分配给表 <th> 的方法。

任何想法都将不胜感激！

Answer 1

试试这个：

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

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

根据CSS-Tricks，break-word 是一个“非标准”值，仅 Webkit 支持。但是，在我有限的测试中，将值更改为 break-all 似乎对 Firefox 没有影响。另一方面，overflow-wrap: break-word; 似乎可以解决问题。请注意，Firefox 仍然需要table-layout: fixed;。否则它不会强制代码 span 换行。