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

  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>