问题描述
我有以下 MWE：
<!DOCTYPE html>
<html>
<head>
<title>I want long equations to be scrollable individually</title>
<Meta charset="utf-8">
<!-- Math support https://www.mathjax.org/#gettingstarted -->
<script>
MathJax = {
tex: {
inlineMath: [['$','$'],['\\(','\\)']]
},svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
.equation {
display: table;
width: 100%;
}
.equation__content,.equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
</style>
</head>
<body>
<p>Here we have a small equation which works perfectly:
<div class="equation">
<equation class="equation__content">
$$E=mc^2$$
</equation>
<div class="equation__number"> (1)</div>
</div>
Now,the following is a very long equation:
<div class="equation">
<div class="equation__content">
$$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\ d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
</div>
<div class="equation__number"> (2)</div>
</div>
which produces a "global horizontal scrollbar" for the <code>body</code> element. I would like to keep the <code>body</code> without scrollbar and add a small scrollbar only to long equaitons.
</p>
</body>
</html>这会产生一个像这样的“全局”滚动条（您可能需要减小窗口的宽度）：
我想要这个：
到目前为止，我已经尝试了我在 Google 上找到的几乎所有答案，但都没有成功。例如与
.equation__content {
width: 90%;
overflow-x: scroll;
}
body {
overflow-x: hidden;
}
我避免使用全局滚动条，但没有获得本地滚动条。我已经在 overflow-x 中尝试了 .equation__content 的所有选项，但没有一个有效。
可以做我想做的事吗？ （我希望这是因为 Stack Overflow 将它用于代码块，每个代码块在需要时都有自己的“本地滚动条”。）
解决方法
其中一种方法是将 white-space:nowrap; 用于您的公式：
.equation-table {
display: table;
width: 100%;
background-color: lightgreen;
border: 1px solid #666666;
border-spacing: 5px;
table-layout: fixed;
}
.equation-table-row {
display: table-row;
width: auto;
clear: both;
}
.equation-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 50%;
overflow-x: auto;
background-color: lightpink;
white-space:nowrap;
}
.text-center {
text-align: center;
}<div class="equation-table">
<div class="equation-table-row">
<div class="equation-table-col" align="center">Some Header</div>
<div class="equation-table-col">Some Header 2</div>
</div>
<div class="equation-table-row">
<div class="equation-table-col">$$E=mc^2$$</div>
<div class="equation-table-col text-center">(1)</div>
</div>
<div class="equation-table-row">
<div class="equation-table-col">
$$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
</div>
<div class="equation-table-col text-center">(2)</div>
</div>
</div>更新：
As mdn says about table-layout: fixed：
表格和列的宽度由表格和列的宽度设置 元素或按第一行单元格的宽度。细胞在 后续行不影响列宽。
,最后我找到了做我想做的事情的方法如下：
<!DOCTYPE html>
<html>
<head>
<title>I want long equations to be scrollable</title>
<meta charset="utf-8">
<!-- Math support https://www.mathjax.org/#gettingstarted -->
<script>
MathJax = {
tex: {
inlineMath: [['$','$'],['\\(','\\)']]
},svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
.numbered_equation_container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.equation {
width: 100%;
overflow-x: auto;
}
.equation_number {
display: table-column;
}
</style>
</head>
<body>
<p>Here we have a small equation which works perfectly:
<div class="numbered_equation_container">
<div class="equation">
$$E=mc^2$$
</div>
<div class="equation_number">(1)</div>
</div>
Now,the following is a very long equation:
<div class="numbered_equation_container">
<div class="equation">
$$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
</div>
<div class="equation_number"> (2)</div>
</div>
which produces a "global horizontal scrollbar" for the <code>body</code> element. I would like to keep the <code>body</code> without scrollbar and add a small scrollbar only to long equaitons.
</p>
</body>
</html>