Как создать сводный лист типа 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>