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

Question

我正在尝试使用JavaScript动态添加一个包含div的表行。 一切都工作正常，除了添加时，我的列略有移动。 奇怪的是，它似乎只发生在div 包含长度超过一定长度的文本时。

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

JSFiddle

setEventListeners();
function setEventListeners() {
    var hideMe = document.getElementById('hide-me');
    var table = document.getElementById('table');
    hideMe.addEventListener('mouseenter', showHoverMenu);
    table.addEventListener('mouseleave', deleteOtherMenus);
}
function showHoverMenu(e) {
    e.preventDefault();
    deleteOtherMenus();
    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');
    // Delete the "i" at the end of the string and try hovering again
    div.innerHTML = 'abcdefghi';
    rowMenu.appendChild(div);
    td.appendChild(rowMenu);
    tr.appendChild(td);
    var target = e.currentTarget;
    target.parentNode.insertBefore(tr, target.nextSibling);
}
function deleteOtherMenus() {
    var rowMenu = document.getElementsByClassName('row-menu-parent');
    if (rowMenu.length > 0) {
        rowMenu[0].parentNode.removeChild(rowMenu[0]);
    }
}

* {
  border: 1px solid red;
}
table {
    width: 100%;
}
.row-menu div {
    background-color: lightGrey;
}

<table id="table">
    <tr id="hide-me">
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

是什么导致我的列移动，我该如何解决？

编辑：列需要能够自动调整大小，因此固定的表格布局将不起作用。

Answer 1

如果您

不希望调整表格大小，可以将表格设置为 table-layout: fixed;。

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

setEventListeners();
function setEventListeners() {
    var hideMe = document.getElementById('hide-me');
    var table = document.getElementById('table');
    hideMe.addEventListener('mouseenter', showHoverMenu);
    table.addEventListener('mouseleave', deleteOtherMenus);
}
function showHoverMenu(e) {
    e.preventDefault();
    deleteOtherMenus();
    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');
    // Delete the "i" at the end of the string and try hovering again
    div.innerHTML = 'abcdefghi';
    rowMenu.appendChild(div);
    td.appendChild(rowMenu);
    tr.appendChild(td);
    var target = e.currentTarget;
    target.parentNode.insertBefore(tr, target.nextSibling);
}
function deleteOtherMenus() {
    var rowMenu = document.getElementsByClassName('row-menu-parent');
    if (rowMenu.length > 0) {
        rowMenu[0].parentNode.removeChild(rowMenu[0]);
    }
}

* {
  border: 1px solid red;
}
table {
    table-layout: fixed;
    width: 100%;
}
.row-menu div {
    background-color: lightGrey;
}

<table id="table">
    <tr id="hide-me">
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

Answer 2

尝试在CSS中为表格设置box-sizing: border-box和/或将.row-menudiv包装在没有任何样式的div中。

如果您仔细观察，内部div 的边框正在扩大父 TD 的大小，从而导致表格重新调整。