如何阻止HTML表格单元格垂直拉伸？

当点击表格中的一个单元格时，会出现一个X，这是应该的，但我试图阻止表格单元格在发生这种情况时垂直拉伸。单击列中的每个单元格后，单元格将恢复为正常大小，但我需要它，以便单元格永远不会更改大小

let turn=false；
功能播放（单元）{
if（turn==true）{
cell.innerHTML='X'；
}否则{
cell.innerHTML='O'；
}
if（turn==true）{
转向=假；
}否则{
转身=真；
}
}

td{
背景色：花白色；
文本对齐：居中；
宽度：50px；
字体大小：100px；
字体系列：“Trebuchet MS”、“Lucida Sans Unicode”、“Lucida Grande”、“Lucida Sans”、Arial、Sans serif；
}
桌子{
表布局：固定；
边界间距：25px；
宽度：750px；
高度：750px；
背景色：浅海绿色；
显示：内联表；
}
#网格{
浮动：左；
边缘顶部：50px；
左边距：130像素；
}

---

默认情况下，HTML表格应该进行拉伸和缩放，以适合其内部的内容。这可以通过显式定义高度和宽度来覆盖。因此，如果您添加高度：100px到

td

CSS规则，它会将

td

的高度锁定到100px

但是，等等，这仍然不能完全修复它，因为100px字体大小的X或O的高度使单元格大于100px的高度。如果您使用浏览器的开发人员工具对此进行检查，您可以看到，一旦在表格单元格中添加了字符，单元格高度实际上是138px（至少在Windows上的Chrome中，这可能在不同的浏览器上略有不同）。为了解决这个问题，可以将CSS中的高度设置为稍高一点，比如说150px。另一个选项是使用

div

s来构建它，当您设置显式的高度/宽度时，它不应该自动展开

根据，看起来最一致的解决方法是在单元格内添加具有固定高度/宽度的

div

，而不是在

td

上设置这些值

let turn=false；
功能播放（单元）{
//修改了此选项，以便可以切换空单元格以试验高度
如果（cell.innerHTML！=''）{
cell.innerHTML=''；
}否则，如果（转身）{
cell.innerHTML='X'；
}否则{
cell.innerHTML='O'；
}
转身=！转身；
}

td{
背景色：花白色；
文本对齐：居中；
宽度：50px；
字体大小：100px；
字体系列：“Trebuchet MS”、“Lucida Sans Unicode”、“Lucida Grande”、“Lucida Sans”、Arial、Sans serif；
高度：138px；/*添加此*/
}
桌子{
表布局：固定；
边界间距：25px；
宽度：750px；
高度：750px；
背景色：浅海绿色；
显示：内联表；
}
#网格{
浮动：左；
边缘顶部：50px；
左边距：130像素；
}

X

请将您的JS也包括在内，以便我们可以看到一个工作示例。这是否回答了您的问题？不幸的是没有