I am working on a small program for playing Quantik, and I have encountered an issue with the div#gameTable element being larger than its content. I am utilizing a CSS grid structure for layout and my goal is to display the entire game on one page without the need for scrollbars. How can I address this problem and ensure that the div#gameTable adjusts to fit its content?
https://i.sstatic.net/shiwH.jpg
Here are 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. player</p>
</div>
<p id="informativeText">vs</p>
<div id="secondPlayer">
<img id="pawnWhite" src="images/pawnWhite.png" alt="pawnWhite">
<p id="secondPlayersID">2. player</p>
</div>
</div>
<div id="firstPlayersFigures">
<div id="firstPlayersSign">1. player</div>
<div id="firstPlayersCurrentFigures"></div>
</div>
<div id="secondPlayersFigures">
<div id="secondPlayersSign">2. player</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;
}
The table is dynamically generated using JavaScript.
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;
}