表垂直拉伸

Question

我目前正在开发一种Tic-Tac-Toe的变体，它需要板内的板。我不打算发布HTML，因为它太长了，但格式是：

<table id="board">
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <button or text>

一切都很顺利，但我遇到了CSS问题。最初董事会看起来像这样：

然后经过一些动作后，它看起来像这样：

如果你看中间的桌子，它会略微垂直拉伸，因为按钮和字母之间的大小不同，使它看起来有点草率。没有其他东西似乎伸展这种方式。这是我的CSS：

table button {
    height: 40px;
    width: 40px;
    display: block;
    margin:1px
}
table#board > tr > td > table > tr > td {
    <!--Small cells-->
    height: 42px;
    width: 42px;
}
table#board > tr > td {
    <!--Big cells-->
    min-height: 120px;
    min-width: 120px;
}
table#board > tr > td > table {
    min-height: 146px;
    min-width: 146px;
    table-layout: fixed;
}

如果有人知道如何阻止桌子拉伸，或者如何改善我的CSS，我会很感激。