html - 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 似乎使用了一些逻辑以漂亮的方式显示表格。

我能得到的最接近 Chrome 版本的是使用以下 css:

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

td {
  word-wrap: break-word;
}

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

https://monosnap.com/file/SJ6T20vIHpRTW5sy3RAa8RfY1Uchiq

我在 Github Pages 上创建了一个演示:https://sspkmnd.github.io/mkdocs-table-layout-problem (repo – https://github.com/sspkmnd/mkdocs-table-layout-problem ) 希望这将有助于看出差异。此外，还有一个更改表格样式的按钮，因此您可以看到table-layout: fixed; 之间的区别。和 table-layout: auto; – 它就在 table 上方。

问题是:

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

PS:我想有一种方法可以明确地以百分比为列设置宽度。我试图实现这一点，但我没有找到将类分配给表的方法 <th>通过 Markdown(这是来源)。

任何想法将不胜感激!

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;。否则它不会强制代码跨度换行。