如何创建类似于 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 {

  empty-cells: hide;

  border: 1px solid #999;

}

td {

  background: #fff;

  border: 1px solid #999;

  padding: 10px 15px;

  cursor: pointer;

}

<table class="tbl" cellspacing="0" cellpadding="0">

  <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>

这是另一个版本：

.MainDiv {

  border: 1px solid #999;

  display: inline-block;

}

table.tbl {

  empty-cells: hide;

}

td.noborder {

  background: #fff;

  border: 1px solid #999;

  width: 50px;

  height: 50px;

  text-align: center;

}

td.removeBorder {

  width: 100px;

  height: 50px;

}

td:empty {

  visibility: hidden;

}

<div class="MainDiv">

  <table class="tbl" cellspacing="0" cellpadding="0">

    <tbody>

      <tr>

        <td colspan="3" class="removeBorder">Total (summary)</td>

      </tr>

      <tr>

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

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

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

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

      </tr>

      <tr>

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

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

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

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

      </tr>

    </tbody>

  </table>

</div>