如何用描述创建方程表？

问题描述 投票：2回答：2

我想创建一个无边界的方程表，方程编号和等号对齐： 代替等号，我想插入彩色和缩放的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>

(Didn't get far in adding descriptions without a messy code.)

如何实现这一目标？

html css html-table alignment mathjax
2个回答
2
投票

可以使用一些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 takes up a lot more space than RHS; to even it out, add inline styles to the top column only: 
<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-resizevertically将符号与文本的其余部分对齐）

使用标题和描述完成后，我们添加了一个额外的行和列，并调整宽度：

<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>
(As a bonus, I rewrote the HTML for simplicity; this way, LHS and RHS are easy to spot and edit, and new rows can be created by copy/pasting the five-line blocks.)
... aand we are done. Hope it's useful.

现在去锤一些数学表。

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

1
投票

你应该探索mathjax（乳胶）强大的对齐功能

<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规则校正的移位。我不确定它是你想要的）你可以用\hline分隔线（然后调整垂直空间如下：\\[2pt]\hline。

正如@Xufox评论中所建议的那样，您还可以探索\array功能来构建表格。但是，不要那样：https://math.meta.stackexchange.com/questions/2016/tabular-in-mathjax?answertab=active#tab-top（另请参阅上面关于如何使用数组的问题的评论）

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.