如何对齐 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

制作相同的表格结构，并使用透明边框。还用于&nbsp;保持单元格的高度。#table1 tr:first-child td {&nbsp; border-top: solid transparent 1px;&nbsp; border-left: solid transparent 1px;&nbsp; border-right: solid transparent 1px;}td {&nbsp; padding:5px;&nbsp; border:solid black 1px;}table {&nbsp; border-collapse:collapse;&nbsp; float:left;&nbsp; table-layout: fixed;&nbsp; width: 10rem;&nbsp; height: 10rem;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="table1">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>3</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>5</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>6</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>7</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>8</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>9</td>&nbsp; &nbsp; </tr></table><table style="margin-left:20px">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>yellow</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>aqua</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; </tr></table>