I’m trying to create a bingo card. I’d like for there to be a couple color options for people to use when selecting a box. However when choosing a color and selecting a box. This changes the box sizing and quickly offsets my whole bingo card.bingo boxes sized differently

What do I need to do to make sure that only the background color of the selected box changes and not the sizing of it?

I’ve tinkered with this code, but can’t seem to stop the sizing from changing. Ideally only the background color changes matching whatever color the person playing chooses.

var selectedColor = "";
function generateCard() {
var card = document.getElementById("bingoCard");
card.innerHTML = ""; // Clear previous card
shuffleArray(words);
var index = 0;
for (var i = 0; i < 5; i++) {
var row = card.insertRow();
for (var j = 0; j < 5; j++) {
var cell = row.insertCell();
cell.textContent = words[index++];
cell.onclick = markNumber;
if (cell.classList.contains("marked") && selectedColor) {
cell.classList.add(selectedColor);
}
}
}
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function markNumber() {
if (!this.classList.contains("marked")) {
this.classList.add("marked");
if (selectedColor) {
this.classList.add(selectedColor);
}
} else {
this.classList.remove("marked");
if (selectedColor) {
this.classList.remove(selectedColor);
}
}
}
function changeColor(color) {
selectedColor = color;
}