如何编写HTML实现乘法竖式的规范显示

修复方案 #

你遇到的两个问题根源分别是：

• 横线断裂：单元格默认存在间距，单独给td加下边框时会出现断层
• 数字对齐异常：嵌套表格层级过多，不同表格默认的边距、单元格尺寸不统一

针对这两个问题调整后的完整代码如下：

CSS代码

.vert-arith table {
  border-collapse: collapse;
  font-family: monospace;
  font-size: 125%;
}
.vert-arith td {
  width: 1.2em;
  text-align: center;
  padding: 0;
  height: 1.5em;
}
.old-vertArith-equal-bar {
  border-bottom: 1px solid #000;
}
.old-space-indent {
  margin-left: 32px;
  cursor: default;
}
.step-title {
  position: absolute;
  left: 0;
}

HTML代码

<div class="vert-arith">
  <div style="position:relative;">
    <!-- 第一步：乘个位 -->
    <div>
      <div class="step-title">乘个位</div>
      <br><br>
      <div class="old-space-indent">
        <table>
          <tr>
            <td></td><td></td><td><span style="color:#5050ff;"><b>2</b></span></td><td><span style="color:#5050ff;"><b>3</b></span></td>
          </tr>
          <tr>
            <td class="old-vertArith-equal-bar">×</td><td class="old-vertArith-equal-bar"></td><td class="old-vertArith-equal-bar">3</td><td class="old-vertArith-equal-bar"><span style="color:#5050ff;"><b>2</b></span></td>
          </tr>
          <tr>
            <td></td><td></td><td><span style="color:green;"><b>4</b></span></td><td><span style="color:green;"><b>6</b></span></td>
          </tr>
        </table>
      </div>
      <br><br>
    </div>
    <!-- 第二步：乘十位 -->
    <div>
      <div class="step-title">乘十位</div>
      <br><br>
      <div class="old-space-indent">
        <table>
          <tr>
            <td></td><td></td><td><span style="color:#5050ff;"><b>2</b></span></td><td><span style="color:#5050ff;"><b>3</b></span></td>
          </tr>
          <tr>
            <td class="old-vertArith-equal-bar">×</td><td class="old-vertArith-equal-bar"></td><td class="old-vertArith-equal-bar"><span style="color:#5050ff;"><b>3</b></span></td><td class="old-vertArith-equal-bar">2</td>
          </tr>
          <tr>
            <td></td><td></td><td>4</td><td>6</td>
          </tr>
          <tr>
            <td></td><td><span style="color:green;"><b>6</b></span></td><td><span style="color:green;"><b>9</b></span></td><td><span style="color:green;"><b>0</b></span></td>
          </tr>
        </table>
      </div>
      <br><br>
    </div>
    <!-- 第三步：相加 -->
    <div>
      <div class="step-title">相加得到结果</div>
      <br><br>
      <div class="old-space-indent">
        <table>
          <tr>
            <td></td><td></td><td>2</td><td>3</td>
          </tr>
          <tr>
            <td class="old-vertArith-equal-bar">×</td><td class="old-vertArith-equal-bar"></td><td class="old-vertArith-equal-bar">3</td><td class="old-vertArith-equal-bar">2</td>
          </tr>
          <tr>
            <td></td><td></td><td><span style="color:#5050ff;"><b>4</b></span></td><td><span style="color:#5050ff;"><b>6</b></span></td>
          </tr>
          <tr>
            <td class="old-vertArith-equal-bar">+</td><td class="old-vertArith-equal-bar"><span style="color:#5050ff;"><b>6</b></span></td><td class="old-vertArith-equal-bar"><span style="color:#5050ff;"><b>9</b></span></td><td class="old-vertArith-equal-bar"><span style="color:#5050ff;"><b>0</b></span></td>
          </tr>
          <tr>
            <td></td><td><span style="color:green;"><b>7</b></span></td><td><span style="color:green;"><b>3</b></span></td><td><span style="color:green;"><b>6</b></span></td>
          </tr>
        </table>
      </div>
      <br><br>
    </div>
  </div>
  最终乘积为736。
</div>

内容的提问来源于stack exchange，提问作者ProgRank