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（回购– https://github.com/sspkmnd/mkdocs-table-layout-problem）希望这将有助于您了解两者之间的区别。另外，还有一个按钮可以更改表格的样式，因此您可以看到table-layout: fixed;和table-layout: auto;之间的区别–它就在表格上方。

问题是：

有没有办法像在Chrome中那样使它在Firefox中显示？
为什么默认情况下它会在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;。否则，它不会强制代码范围自动换行。

Chrome与Firefox在mkdocs中的广泛差异

1 个答案: