4

我不是一个真正的 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 页面上创建了一个演示：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：我想有一种方法可以以百分比为列显式设置宽度。我试图做到这一点，但我没有找到一种方法 <th>通过 Markdown （这是源代码）将一个类分配给一个表。

任何想法将不胜感激！

4

1 回答 1

0

尝试这个：

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

于 2018-12-06T19:10:14.523 回答