Коробка для карточек бинго меняет размеры при выборе ⇐ CSS

[Anonymous]

Я пытаюсь создать карту бинго. Я бы хотел, чтобы у людей было несколько вариантов цвета, которые они могли бы использовать при выборе коробки. Однако при выборе цвета и выборе коробки. Это изменит размер коробки и быстро сместит всю мою карту бинго.


Что мне нужно сделать, чтобы изменить только цвет фона выбранного поля, а не его размер?
Я повозился с этим кодом, но не могу остановить изменение размера. В идеале меняется только цвет фона, соответствующий цвету, который выбирает играющий.
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;
array = 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;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... n-selected