Lo siento por los nombres de las variables noruegas en el archivo js, pero si intenta hacer clic en una celda, verá que la altura cambiará de tamaño, me pregunto si alguien tiene un cambio fácil y rápido.
<!doctype html> <html lang="no"> <head> <title> Standardoppsett </title> <meta charset="utf-8"> </head> <style> .board { table-layout: fixed; width: 360px; height: 360px; border: 32px solid; border-color: darkslategray; border-radius: 5px; } .firkant { border: 1px black solid; } .hvit{ background:white; } .svart{ background:grey; } td:hover { background: lightgreen; cursor: pointer } </style> <body> <div> <table class="board"></table> </div> <script> let tableEl = document.querySelector("table") for(let i = 1; i < 9; i++) { let trEl = document.createElement('tr'); for(let j = 1; j < 9; j++) { let tdEl = document.createElement('td'); tdEl.setAttribute("id","rute"+i+j) tdEl.addEventListener("click",plasserDronning) trEl.appendChild(tdEl); // Bare på grunn av css tdEl.className = (i%2 === j%2) ? "hvit firkant" : "svart firkant"; } tableEl.appendChild(trEl); } turTeller = 0 function plasserDronning(e){ let firkantTrykket = e.target console.log(firkantTrykket.id) if (turTeller == 0) { if(firkantTrykket = e.target){ firkantTrykket.innerHTML = "a"; } turTeller = 1 } else if(turTeller == 1) { if(firkantTrykket = e.target){ firkantTrykket.innerHTML = "b"; } turTeller = 2 } } </script> </body> </html>Hasta ahora, he intentado básicamente todo lo que conozco, he intentado establecer el diseño de la mesa en fijo, he intentado establecer la posición "td" en la parte superior y mucho más, si alguien sabe lo que puedo hacer, sería ¡significa mucho!
En el código anterior, sugiero agregar propiedades de altura en la clase de su etiqueta td que resolverá su problema. si desea una mayor capacidad de respuesta y puede escribir consultas de medios o usar otro marco como bootstap .
.hvit{ background:white; height:20px; } .svart{ background:grey; height:20px; }Puede agregar height:calc(100% / 8); a la firkant (td) para evitar que la célula crezca.
De esta manera, la celda se escalará con la tabla si decide aumentar el tamaño de la tabla o hacerla dinámica.