如何在td内嵌表格并修复空白td不占空间、尺寸不一致问题

修复方案 #

你遇到的两个问题核心原因分别是：空<td>无内容时默认会收缩不占位、多个嵌套表格没有统一单元格尺寸规则，导致列错位。可以按以下步骤修改：

1. 新增基础CSS规则，统一表格和单元格的布局逻辑
   在页面<head>中加入如下样式：

<style>
/* 统一所有竖式相关表格的布局规则 */
.vertical-multi table {
  table-layout: fixed;
  border-collapse: collapse;
  empty-cells: show;
}
/* 统一单元格尺寸和对齐方式，数字右对齐符合竖式书写习惯 */
.vertical-multi td {
  width: 24px;
  height: 28px;
  text-align: right;
  padding: 0 2px;
}
/* 竖式分割线样式 */
.beautiful-line {
  border-bottom: 2px solid #000;
  margin-bottom: 8px;
}
</style>

2. 给外层包裹容器加vertical-multi类复用上面的样式，同时删除原来多余的空tr（就是那些height=2用来当分割线的行，直接用beautiful-line的下边框实现分割线即可）
3. 如果部分空<td>仍然有收缩问题，可以填入 占位。

修改后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>乘法竖式</title>
  <style>
    .vertical-multi table {
      table-layout: fixed;
      border-collapse: collapse;
      empty-cells: show;
    }
    .vertical-multi td {
      width: 24px;
      height: 28px;
      text-align: right;
      padding: 0 2px;
    }
    .beautiful-line {
      border-bottom: 2px solid #000;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
<div class="vertical-multi">
  <div style="text-align: left; margin-bottom: 20px;">
    Now add the results.
  </div>
  <div class="old-space-indent">
    <div style="font-size: 125%;">
      <table>
        <tbody>
          <tr>
            <td>
              <table class="beautiful-line">
                <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td>2</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>×</td>
                    <td></td>
                    <td>3</td>
                    <td>2</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table class="beautiful-line">
                <tbody>
                  <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>+</td>
                    <td>
                      <span style="color: #5050ff;"><b>6</b></span>
                    </td>
                    <td>
                      <span style="color: #5050ff;"><b>9</b></span>
                    </td>
                    <td>
                      <span style="color: #5050ff;"><b>0</b></span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <table>
                <tbody>
                  <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>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>

修改后所有单元格会按统一尺寸渲染，空单元格也会正常占位，分割线显示符合竖式的标准样式，可实现预期效果。

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