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

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个左侧边界(。

我相信你没有在你的金额中说明1倍的边界。

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>

Answer 2

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

边框宽度和高度属性包括内容、填充和边框，但不包括边距。注意填充边框将在盒子里面。

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>