如何创建类似于 html 表格的摘要表

Question

我正在使用 HTML 表格，需要实现类似附加图像的效果。

当我尝试实现这一目标时，我遇到了这样的问题

① 我不知道如何不显示边框线。

② 与期望结果相比，每个像元大小未对齐。

我想以某种方式实现。如果您有任何意见，请告诉我。

谢谢

table {

border-collapse:collapse;

  table-layout: fixed;

  text-align: center;

  width: 10rem;

  height: 10rem;}

td {

border:solid black 1px;

}

.noborder {

}

.noborder2{

}

<table>

  <tbody>

    <tr>

      <td class="noborder">Total (summary)</td>

      <td class="noborder"></td>

      <td class="noborder"></td>

      <td class="noborder"></td>

    </tr>

    <tr>

      <td>A</td>

      <td>B</td>

      <td>C</td>

      <td class="noborder2"></td>

    </tr>

    <tr>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>6</td>

    </tr>

  </tbody>

</table>

Answer 1

您可以使用执行类似的操作empty-cells: hide;。注意：但边框有点关闭，因为它删除了内容不存在的 td 边框。如果可以的话。.tbl {&nbsp; empty-cells: hide;&nbsp; border: 1px solid #999;}td {&nbsp; background: #fff;&nbsp; border: 1px solid #999;&nbsp; padding: 10px 15px;&nbsp; cursor: pointer;}<table class="tbl" cellspacing="0" cellpadding="0">&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="noborder">Total (summary)</td>&nbsp; &nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>A</td>&nbsp; &nbsp; &nbsp; <td>B</td>&nbsp; &nbsp; &nbsp; <td>C</td>&nbsp; &nbsp; &nbsp; <td class="noborder2"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; &nbsp; <td>6</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>这是另一个版本：.MainDiv {&nbsp; border: 1px solid #999;&nbsp; display: inline-block;}table.tbl {&nbsp; empty-cells: hide;}td.noborder {&nbsp; background: #fff;&nbsp; border: 1px solid #999;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; text-align: center;}td.removeBorder {&nbsp; width: 100px;&nbsp; height: 50px;}td:empty {&nbsp; visibility: hidden;}<div class="MainDiv">&nbsp; <table class="tbl" cellspacing="0" cellpadding="0">&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td colspan="3" class="removeBorder">Total (summary)</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">A</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">B</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">C</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder"></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">3</td>&nbsp; &nbsp; &nbsp; &nbsp; <td class="noborder">6</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>