Why div is bigger than its content?

I have a small program to play Quantik, and there's a div#gameTable which is bigger than its content. I am using CSS grid structure for this and I want to display the whole game in one page (without scrollbar). How can I solve this problem and make the div#gameTable to fit its content?

The relevant code snippets:

index.html:

<div id="gameArea">
    <div id="gameTable"></div>
    <div id="infos">
        <div id="firstPlayer">
            <img id="pawnBlack" src="images/pawnBlack.png" alt="pawnBlack">
            <p id="firstPlayersID">1. játékos</p>
        </div>
            
        <p id="informativeText">vs</p>
            
        <div id="secondPlayer">
            <img id="pawnWhite" src="images/pawnWhite.png" alt="pawnWhite">
            <p id="secondPlayersID">2. játékos</p>
        </div>
    </div>
    <div id="firstPlayersFigures">
        <div id="firstPlayersSign">1. játékos</div>
        <div id="firstPlayersCurrentFigures"></div>
    </div>
    <div id="secondPlayersFigures">
        <div id="secondPlayersSign">2. játékos</div>
        <div id="secondPlayersCurrentFigures"></div>
    </div>
</div>

style.css:

#gameTable { grid-area: gameTable; }
#infos { grid-area: infos; }
#firstPlayersFigures { grid-area: firstPlayersFigures; }
#secondPlayersFigures { grid-area: secondPlayersFigures; }
#gameArea {
    visibility: hidden;
    font-size: 1.1em;
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas: 
    'firstPlayersFigures infos secondPlayersFigures'
    'firstPlayersFigures gameTable secondPlayersFigures';
}

#gameTable {
    margin: 0 0 0 430px;
    border-collapse: collapse;
}

#gameTable td, td > button {
    background-color: transparent;
    border: transparent;
    width: 130px;
    height: 130px;
}

#gameTable td, td > img {
    width: 100px;
    height: 100px;
}

#gameTable td {
    border: solid white 2px;
    border-radius: 10px;
    text-align: center;
    font-family: Consolas, monospace;
    font-weight: bold;
}

I am generating the table with js.

render.js:

export function renderTable(board) {
    return `<table>${board.map(renderRow).join("")}</table>`;
}

function renderRow(row) {
    return `<tr>${row.map(renderField).join("")}</tr>`;
}

function renderField(field) {
    let fieldInnerHTML = ``;

    if (field.canStepOn) {
        if (field.item === "") {
            fieldInnerHTML = `<td class="canStepOn"><button></button></td>`;
        } else {
            fieldInnerHTML = `<td class="canStepOn"><img src="images/${field.item}${field.itemColor}.png"></td>`;
        }
    } else {
        if (field.item === "") {
            fieldInnerHTML = `<td></td>`;
        } else {
            fieldInnerHTML = `<td><img src="images/${field.item}${field.itemColor}.png"></td>`;
        }
    }

    return fieldInnerHTML;
}