在块和无之间切换表格单元格背景

Question

我正在使用style.display = "none"来隐藏表格单元格，但是当我再次使用style.display = "block"显示它时，它具有透明背景，而在隐藏它之前它具有坚实的背景。如何取消隐藏细胞以使背景保持稳定？

（在下图中，当我漂浮在其他'菜单'项目上时，浅蓝色高光覆盖整个单元格，但在剪切，复制和粘贴时，它只突出显示单词）

HTML：

<!--Popup Menu-->
<div id="popup" style='position: absolute; display: none; z-index: 20; box-shadow: 5px 5px 6px 0px rgba(0,0,0,0.75);'>
<table cellspacing=0 cellpadding=0 style='border: 2px solid black;'>
  <tr>
    <td class='popupitem' onClick="popupItem(1)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='camera.png'><font style='position: relative; top: -8px;'> &nbsp; Attach photos</font></td>
  </tr>
  <tr id="menuPhrase" >
    <td class='popupitem' onClick="popupItem(7)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='phrase.png'><font style='position: relative; top: -8px;'> &nbsp; Insert a sentence</font></td>
  </tr>
  <tr>
    <td style='border: 1px solid black;'></td>
  </tr>
  <tr>
    <td class='popupitem' onClick="popupItem(2)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='clear.png'><font style='position: relative; top: -8px;'> &nbsp; Clear</font></td>
  </tr>
  <tr>
    <td class='popupitem' onClick="popupItem(3)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='disc2.png'><font style='position: relative; top: -8px;'> &nbsp; Save changes</font></td>
  </tr>
  <tr>
    <td style='border: 1px solid black;'></td>
  </tr>
  <tr id="menuCut">
    <td class='popupitem' onClick="popupItem(4)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='cut.png'><font style='position: relative; top: -8px;'> &nbsp; Cut</font></td>
  </tr>
  <tr id="menuCopy">
    <td class='popupitem' onClick="popupItem(5)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='copy.png'><font style='position: relative; top: -8px;'> &nbsp; Copy</font></td>
  </tr>
  <tr id="menuPaste">
    <td class='popupitem' onClick="popupItem(6)" onMouseOver="this.style.backgroundColor='lightblue'" onMouseOut="this.style.backgroundColor='#FFFFFF'"><img width=32 height=32 src='paste.png'><font style='position: relative; top: -8px;'> &nbsp; Paste</font></td>
  </tr>
</table>

JavaScript的：

// Show all menu items...
document.getElementById("menuPhrase").style.display = "block";
document.getElementById("menuCut").style.display = "block";
document.getElementById("menuCopy").style.display = "block";
document.getElementById("menuPaste").style.display = "block";
if (fieldType=="droplist") {
 // Hide Phrase, Cut, Copy, Paste...
 document.getElementById("menuPhrase").style.display = "none";
 document.getElementById("menuCut").style.display = "none";
 document.getElementById("menuCopy").style.display = "none";
 document.getElementById("menuPaste").style.display = "none";
}

CSS：

td.popupitem {
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 4px;
 padding-right: 10px;
 cursor: pointer;
 background-color: white;
}

Answer 1

尝试style.display = "table-cell"而不是阻止（我假设您最初没有更改display的默认td值，即table-cell）

Answer 2

在该单元格上尝试以下操作：

 border:0px;