使 table 在网格中取其实际高度

Question

我在一个网格中有两个 table，第二个 table 比第一个少行。我想知道如何让第二个看起来像第一个而不让他把整个高度当作第二个，因为它们不是同一行？

.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 仅采用“元素采用的可能性较小的 space”

for more details, you can watch this video:
https://youtube.com/shorts/4iwQcvHYfWE?feature=share (creator: web dev semplified)

使 table 在网格中取其实际高度

make a table take its real height in grid

html

css

grid

html-table