Question

我想创建一个无边界的方程式表格，其中方程式编号且等号对齐：
代替等号，我想插入彩色和按比例缩放的Unicode字符-即较大的红色⬌（等价）。最后，描述与等式一致-最好在右边。

我尝试过居中方程，但是等号和数字未按预期对齐-对齐一个或另一个需要特定于行的间距：

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<center><p>
\([1]\hspace{63px} 1 + 2 = 3\)<br>
\([2]\ \ 1 + 3 + 5= 9 + 0\)
</p></center>

（在没有混乱代码的情况下添加描述并没有走多远。）

这怎么实现？

Answer 1

可以使用一些HTML和CSS创建这样的表。

从基本表格开始，折腾一些CSS来设置表格宽度，添加边框和对齐文本：

table {width: 300px;border-collapse: collapse;}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center;}
.lft {text-align: right;}
.rgt {text-align: left}

<table>
    <tr><td>[1]</td>
    <td class="lft">3 - 2</td>
    <td class="ctr">=</td>
    <td class="rgt">1</td></tr>

    <tr><td>[2]</td>
    <td class="lft">4 + 1 - 3</td>
    <td class="ctr">=</td>
    <td class="rgt">6 - 4</td></tr>                                                     
</table>

LHS比RHS占用更多的空间；为了使它均匀，仅将内联样式添加到 top列：

<tr><td style="width: 10%">[1]</td>
<td class="lft" style="width: 40%">3 - 2</td>
<td class="ctr" style="width: 10%">=</td>
<td class="rgt" style="width: 40%">1</td></tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">=</td>
<td class="rgt">6 - 4</td></tr>

[Above result]要垂直间隔行，请添加td {padding-top: 6px;} [Result]
要添加样式化的Unicode，请将=替换为& #11020 ;（无空格），然后将.ctr修改为

.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}

[Above result]（text-align: center（由于font-resize出轨后，使符号与文本的其余部分垂直对齐）

在完成标题和说明之后，我们添加了额外的行和列，并调整了宽度：

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">Eq</td>
<td class="lft" style="width:20%">LHS</td>
<td style="10%"></td>
<td class="rgt" style="width:20%">RHS</td>
<td>Description</td></tr>

<tr><td>[1]</td>
<td class="lft">3 - 2</td>
<td class="ctr">&#11020;</td>
<td class="rgt">1</td>
<td>More arithmetic</td>
</tr>

<tr><td>[2]</td>
<td class="lft">4 + 1 - 3</td>
<td class="ctr">&#11020;</td>
<td class="rgt">6 - 4</td>
<td>Wider arithmetic</td></tr>

[Above result]要摆脱边界，请从CSS中删除

table, td, th {border-bottom: 1px solid black;}

最后，进一步完善幻想，添加数学库并定义新命令以轻松设置枚举样式：

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

成品：

table {
    width: 400px;
    border-collapse: collapse;   
}
table, td, th {border-bottom: 1px solid black;}
.ctr {text-align: center; line-height: 100%; font-size: 150%; color: red}
.lft {text-align: right;}
.rgt {text-align: left}
 td {padding-top: 6px;}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<p style="display:none">\(\newcommand{b}[1]{\boldsymbol{[#1]}}\)</p>

<table>

<tr style="border-bottom: 1px solid black; font-weight: bold">
<td style="width: 10%">\(Eq\)</td><td class="lft" style="width:18%">
LHS
</td><td class="ctr" style="width: 13%"></td><td class="rgt" style="width:20%">
RHS
</td><td>Description</td></tr>
   
<tr><td>\(\b{2}\)</td><td class="lft">
\(3 - 2\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(1\)
</td><td>More arithmetic</td></tr>
  
<tr><td>\(\b{4}\)</td><td class="lft">
\(E\)
</td><td class="ctr">&#11020;</td><td class="rgt">
\(mc^2\)
</td><td><i>FEEL THE ENERGY</i></td></tr>

</table>

（此外，为简化起见，我重写了HTML；这样一来，LHS和RHS易于发现和编辑，并且可以通过复制/粘贴五行块来创建新行。）

...而且我们完成了。希望它有用。

现在去锤一些数学表。

注意：有关使用MathJax数组的更简单替代方法，请参见scraaappy的答案。

Answer 2

尽管您应该探索mathjax（latex）强大的对齐功能

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>

<p style="width:100%;text-align:center;">
\(\begin{alignat}{3}
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
\\&[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
\\&[3]&&&{x+1} &&\ \color{red}{\unicode{x2B0C}} 5 &&\text{description}
\end{alignat}\)
</p>

修改

.unicode{
  transform-origin:50% 50%;  
  transform:scale(1.6,1.5);
}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>


<p style="width:100%;text-align:center;">
\(\begin{alignat}{3}
 \\[2pt]\hline
&[1]\hspace{63px}&&&{3-2} &&\ = 1 \hspace{63px}&&\text {More arithmetic}
 \\[2pt]\hline
 &[2]&&&{E} &&\ = mc^2 &&\text {Feel the energy}
  \\[2pt]\hline
&[3]&&&{x+1} &&\ \color{red}{\class{unicode}{\unicode{x2B0C}}}\ 5 &&\text{description}
 \\[2pt]\hline
 \end{alignat}\)
</p>

您可以使用\class{className}设置文本样式（但是，使用字体大小会产生需要使用CSS规则纠正的偏移。我不确定这是否是您想要的），并且可以使用{分隔行{1}}（然后按照以下步骤调整垂直空间：\hline。

如@Xufox的注释中所建议，您还可以探索\\[2pt]\hline功能来构建表。但是，请不要这样做： https://math.meta.stackexchange.com/questions/2016/tabular-in-mathjax?answertab=active#tab-top（另请参阅问题上方的注释以了解如何使用数组）

因此，根据您要实现的目标（例如响应性），您的解决方案可能是最容易设置的。

如何创建带有描述的方程式表？

2 个答案: