Широкие различия таблиц в Chrome и Firefox в mkdocs-материале
Я не совсем сторонник html / css / js, но я делаю документацию для одного проекта в MkDocs с Материальная тема. Проблема здесь в том, что у меня очень широкие таблицы и они по-разному отображаются в 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; - он находится чуть выше таблицы.
Вопросы следующие:
- Есть ли способ сделать так, чтобы в Firefox это выглядело как в Chrome?
- Почему по умолчанию он переполняет контейнер в Firefox? Полагаю, этого не должно быть.
PS: Полагаю, есть способ явно указать ширину столбцов в процентах. Я пытался добиться этого, но не нашел способа назначить класс таблице <th> через Markdown (который является источником).
Будем очень признательны за любые идеи!
Открыл там вопрос - github.com/squidfunk/mkdocs-material/issues/922
Ответы 1
Попробуй это:
table {
table-layout: fixed;
max-width: 100%;
}
.md-typeset code {
overflow-wrap: break-word;
}
Согласно CSS-хитрости, break-word - это «нестандартное» значение, поддерживаемое только Webkit. Однако изменение значения на break-all, похоже, не повлияло на Firefox в моих ограниченных тестах. С другой стороны, overflow-wrap: break-word;, кажется, делает свое дело. Обратите внимание, что Firefox по-прежнему требуется table-layout: fixed;. В противном случае это не приводит к принудительному переносу фрагментов кода.
Спасибо, что разобрались с проблемой. Ответил вам в соответствующей ветке GitHub: github.com/squidfunk/mkdocs-material/issues/922
@waylan, .md-typeset, зачем это нужно в CSS. где я могу найти более подробную информацию об этом виде приставок
Я бы предложил заполнение отчета об ошибке с Материальной темой.