javascript - 表格单元格高度大于它的宽度(但为两者设置相同的数字)

Question

我正在尝试使用 Javascript 在 div 上放置一个网格(表格)。 div 的宽度为 600px，高度为 400px。表格的每个单元格都是 20x20px。但是单元格的高度大于它们的宽度。为什么？以及如何解决这个问题？

var htmlElements = "";

for (var r = 0; r < 20; r++) {
  htmlElements += '<tr class="tRow">';

  for (var c = 0; c < 30; c++) {
    htmlElements += '<td class="tCell"></td>';
  }

  htmlElements += '</tr>'

}


var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;

#workspace {
  position: absolute;
  width: 600px;
  height: 400px;
  background-color: cadetblue;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -200px;
}

table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0;
}

td {
  width: 20px;
  height: 20px;
}

<div id="workspace">
  <table id="tab">

  </table>
</div>

Answer 1

您的单元格正在重新缩放，因为您为容器 #workspace 设置了固定的高度和宽度。

在表格中，明确的单元格宽度和高度始终被整个表格大小覆盖。

如果您坚持设置宽度，请确保使用正确的计算方法。

在这种情况下，宽度为 631px。 (30 个右边框和 1 个左边框)。

我相信您没有考虑到总和中的 1px 边框。

var htmlElements = "";

for (var r = 0; r < 20; r++) {
  htmlElements += '<tr class="tRow">';

  for (var c = 0; c < 30; c++) {
    htmlElements += '<td class="tCell"></td>';
  }

  htmlElements += '</tr>'

}


var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;

#workspace {
  position: absolute;
  width: 631px;
  height: 421px;
  background-color: cadetblue;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -200px;
}

table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0;
}

td {
  width: 20px;
  height: 20px;
}

<div id="workspace">
  <table id="tab">

  </table>
</div>