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

Question

I am trying to add a table row containing a div dynamically using JavaScript. Everything is working fine except, when it is added, my columns move slightly. Weirdly, it seems to only happen when the div contains text longer than a certain length.

In the stripped down version below, you can see the problem clearly. After trying it, go to line 24 of the JavaScript, remove the "i" at the end of the string, and it will no longer move my columns.

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> 

What is causing my columns to move, and how do I fix it?

EDIT: The columns need to be able to automatically resize, so a fixed table layout will not work.

Answer 1

You can set your table to table-layout: fixed; if you don't want it resizing.

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

Try setting box-sizing: border-box in CSS for the table and/or wrap the .row-menu div in a div that does not have any styling.

If you look closely, the inner div's border is expanding the size of the parent TD which is causing the table to re-adjust.