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

只需将box-sizing: border-box;添加到您的单元格中即可：

边框> 的width和height属性包括内容，内边距和边框，但不包括边距。注意填充和边框将在框内。

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;
  box-sizing: border-box;
}

td {
  width: 20px;
  height: 20px;
}

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

Answer 2

您的单元格正在重新缩放，因为您为容器#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>

表单元格的高度大于其宽度（但为两者设置相同的数字）

2 个答案: