Как выровнять html строк таблицы

Question

Я хотел бы суммировать цветные ячейки по строкам и строкам в html таблицах.

Так что я должен установить итоговые ячейки, но это выглядит немного смещенным.

Мой желаемый результат как ниже.

Есть ли способ реализовать это?

Спасибо

td {
padding:5px;
border:solid black 1px;
}

table {
border-collapse:collapse;
float:left;
  table-layout: fixed;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table style="margin-left:20px">
  <tr>
    <td>yellow</td>
    <td>aqua</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
 </table>

Answer 1

Создайте ту же структуру таблицы и используйте прозрачную для границы.

Также используйте  , чтобы сохранить высоту ячеек.

#table1 tr:first-child td {
  border-top: solid transparent 1px;
  border-left: solid transparent 1px;
  border-right: solid transparent 1px;
}

td {
  padding:5px;
  border:solid black 1px;
}

table {
  border-collapse:collapse;
  float:left;
  table-layout: fixed;
  width: 10rem;
  height: 10rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
<table style="margin-left:20px">
    <tr>
        <td>yellow</td>
        <td>aqua</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>