Javascript 拖动GIF时表格变形

当我将gif拖入单元格时，为什么表格会变形？我怎样才能解决这个问题？我希望表格（和每个单元格）保持在将gif拖动到单元格中时的大小

以下是我的一些情况：

CSS

。播放{
宽度：100%；
身高：100%；
}
.玩td{
}
.游戏.房间{
宽度：100%；
身高：100%；
边框：1px实心#AAAAA；
}
.左{
背景颜色：蓝色；
}
.中心{
背景色：白色；
}
.对{
背景色：红色；
}

javascript

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

只需添加

表格布局：固定放在桌子上，
高度：50%用于您的行：


这就解决了您的问题-但是您应该注意，正如在评论中所说的，您根本不应该使用表来构建它。表格用于表格数据，而不是构建布局。也许您不想阅读
请注意，表格是用于表格数据的。您需要在CSS中设置六个具有显式维度的div。所以我不应该使用table？除非它是真正的表格数据。使用单个div作为“父级”，其中包含六个div，以便它们以3/3的比例排列，这给了您更大的灵活性，使用CSS选择器（本机使用
document.querySelector
或类似jQuery的东西）查找正确的“单元格”仍然非常容易。在这种情况下，最重要的一点是，所有单元格实际上都有一个真实的宽度，否则它们会调整大小以适应您的内容，事情看起来会非常错误（不管是table还是div）。谢谢您的建议！！