Javascript 动态添加包含div的行时，为什么HTML表列会调整大小？

我正在尝试使用JavaScript动态添加包含div的表行。一切都很好，除了添加时，我的列会稍微移动。奇怪的是，似乎只有当div包含的文本长度超过一定长度时才会发生这种情况

在下面的简化版本中，您可以清楚地看到问题。尝试后，转到JavaScript的第24行，删除字符串末尾的“i”，它将不再移动我的列

setEventListeners（）；
函数setEventListeners（）{
var hideMe=document.getElementById（'hide-me'）；
var table=document.getElementById（'table'）；
hideMe.addEventListener（'mouseenter'，showHoverMenu）；
表.addEventListener（'mouseleave'，deleteOtherMenus）；
}
功能显示悬停菜单（e）{
e、 预防默认值（）；
删除其他菜单（）；
var tr=document.createElement（'tr'）；
tr.setAttribute（'class'，'row menu parent'）
var td=document.createElement（'td'）；
td.colSpan=4；
var rowMenu=document.createElement（'div'）；
rowMenu.classList.add（'row-menu'）；
var div=document.createElement（'div'）；
//删除字符串末尾的“i”，然后再次尝试悬停
div.innerHTML='abcdefghi'；
rowMenu.appendChild（div）；
td.appendChild（行菜单）；
tr.appendChild（td）；
var目标=e.currentTarget；
target.parentNode.insertBefore（tr，target.nextSibling）；
}
函数deleteOtherMenus（）{
var rowMenu=document.getElementsByClassName（'row-menu-parent'）；
如果（rowMenu.length>0）{
行菜单[0].parentNode.removeChild（行菜单[0]）；
}
}

*{
边框：1px纯红；
}
桌子{
宽度：100%；
}
.行菜单分区{
背景颜色：浅灰色；
}

A.
B
C
D

您可以将表格设置为

表格布局：固定如果不想调整大小

table {
    table-layout: fixed; /* Add this */
    width: 100%;
}


setEventListeners（）；
函数setEventListeners（）{
var hideMe=document.getElementById（'hide-me'）；
var table=document.getElementById（'table'）；
hideMe.addEventListener（'mouseenter'，showHoverMenu）；
表.addEventListener（'mouseleave'，deleteOtherMenus）；
}
功能显示悬停菜单（e）{
e、 预防默认值（）；
删除其他菜单（）；
var tr=document.createElement（'tr'）；
tr.setAttribute（'class'，'row menu parent'）
var td=document.createElement（'td'）；
td.colSpan=4；
var rowMenu=document.createElement（'div'）；
rowMenu.classList.add（'row-menu'）；
var div=document.createElement（'div'）；
//删除字符串末尾的“i”，然后再次尝试悬停
div.innerHTML='abcdefghi'；
rowMenu.appendChild（div）；
td.appendChild（行菜单）；
tr.appendChild（td）；
var目标=e.currentTarget；
target.parentNode.insertBefore（tr，target.nextSibling）；
}
函数deleteOtherMenus（）{
var rowMenu=document.getElementsByClassName（'row-menu-parent'）；
如果（rowMenu.length>0）{
行菜单[0].parentNode.removeChild（行菜单[0]）；
}
}
*{
边框：1px纯红；
}
桌子{
表布局：固定；
宽度：100%；
}
.行菜单分区{
背景颜色：浅灰色；
}

A.
B
C
D
尝试在CSS中为表格设置
框大小：边框框
，和/或将
行菜单
div包装到没有任何样式的div中

如果仔细观察，内部div的边框正在扩展父TD的大小，这将导致表格重新调整。
imo通过css设置TD宽度。非常感谢您的回复！这是解决这个问题的好办法。不幸的是，在我更大的项目中，将表设置为fixed完全破坏了它，因为它的设置方式。