做一个桌子在网格中取得真实的高度

Question

我在网格中有两个桌子，第二个表比第一表少。我想知道如何首先使第二个看起来像，而不要让他将整个高度作为第二行，因为它们不是同一行？

.coords {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

<div class="coords">
    <table border="1">
    <tbody>
        <tr>
        <th>X</th>
        <th>Y</th>
        </tr>
    </tbody>
    <tbody>
        <tr>
        <td>536594</td>
        <td>748725</td>
        </tr>
        <tr>
        <td>335994</td>
        <td>349825</td>
        </tr>
        <tr>
        <td>333594</td>
        <td>443025</td>
        </tr>
        <tr>
        <td>331294</td>
        <td>446525</td>
        </tr>
        <tr>
        <td>237594</td>
        <td>449925</td>
        </tr>
        <tr>
        <td>235594</td>
        <td>542825</td>
        </tr>
        <tr>
        <td>137294</td>
        <td>547025</td>
        </tr>
        <tr>
        <td>136694</td>
        <td>548525</td>
        </tr>
        <tr>
        <td>130694</td>
        <td>549125</td>
        </tr>
        <tr>
        <td>037994</td>
        <td>640825</td>
        </tr>
        <tr>
        <td>036194</td>
        <td>642525</td>
        </tr>
        <tr>
        <td>034094</td>
        <td>647525</td>
        </tr>
        <tr>
        <td>035394</td>
        <td>741625</td>
        </tr>
        <tr>
        <td>039194</td>
        <td>743425</td>
        </tr>
    </tbody>
    </table>
    <table border="1">
    <tbody>
        <tr>
        <th>X</th>
        <th>Y</th>
        </tr>
    </tbody>
    <tbody>
        <tr>
        <td>232694</td>
        <td>747625</td>
        </tr>
        <tr>
        <td>339194</td>
        <td>842225</td>
        </tr>
        <tr>
        <td>434994</td>
        <td>845025</td>
        </tr>
        <tr>
        <td>536594</td>
        <td>748725</td>
        </tr>
    </tbody>
    </table>
</div>

Answer 1

尝试添加此行的css：

.coords table {
    height: min-content;
}

通过这样做，table仅采用“元素少的空间”

有关更多详细信息，您可以观看此视频：
https：// youtube。 com/shorts/4iwqcvcvhfwe？feature = share
（创建者：Web Dev Semplified）