Is there a way I can get the table to not resize in height when I innerHtml something in the "t-CodePudding

I am sorry for the norwegian variable names in the js file, but if u try to click a cell, you will see that the height of it will resize, I am wondering if anyone have an easy and quick change!

<!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 ></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>

So far I have tried basically everything I am aware of, I have tried to set the table layout to fixed, I have tried to set the "td's" posistion to top and a lot more, if anyone knows what I can do, it would mean a lot!

CodePudding user response：

In above code I suggest to add height properties in you td tag's class that will solve your issue. if you want to more responsive and you can write media queries.or using other framework like bootstap.

.hvit{
  background:white;
  height:20px;
}
.svart{
  background:grey;
  height:20px;
}

CodePudding user response：

You can add height:calc(100% / 8); to the firkant (td) class to prevent the cell from growing.

This way the cell will scale with the table if you decide to increase the table size or make it dynamic.