使用纯javascript动态隐藏表格单元格内容时，如何保护单元格边框？答案

【问题标题】：How can I protect the cell borders when hiding the table cells contents dynamically using plain javascript?使用纯javascript动态隐藏表格单元格内容时，如何保护单元格边框？
【发布时间】：2019-12-30 13:05:25
【问题描述】：

我正在用纯 JavaScript 创建一个表格，并以两种方式使用 onClick 侦听器事件填充它 - 单击外部按钮或单击其中一个单元格本身；并且在这两种方式中，调用一个函数来随机分配值给一些单元格。我无法使用任何一种可用的方法来隐藏表格单元格的内容——显示：无和可见性：隐藏。但是我仍然可以使用 fontSize = 0 来做到这一点，而另一个问题突然出现，即单元格边框丢失了。因此，我的问题是我想隐藏我的表格单元格内容，同时在其中渲染值并影响表格结构。

我已经尝试过可用的常规方法。

1) td {display: none;} 和 td {visibilty: hidden}

2) 我也尝试过内联 CSS 样式方法来隐藏单元格内容，但所有这些方法都会使表格本身空白，即消除单元格边框本身。

3) 当我使用： document.getElementById('myelement').getElementsByTagName('td')[n[i]].style.fontSize = 0;我可以隐藏内容，但单元格边框会丢失。

<body>
        <div class="container-fluid">
           <table id="myelement">
                <tr>
                 <td>&nbsp;</td>
                 ...  ....  ...
                 <td>&nbsp;</td>
                </tr>
            </table>
        </div>
</body>
<script>
   ...
   for(let i=0;i<mycount;i++){
      td[n[i]].firstChild.nodeValue='X';
       document.getElementById('myelement').getElementsByTagName('td') 
       [n[i]].style.fontSize = 0;
     }
    ...
</script>

所有可用的技术都会使表格本身空白，即消除单元格边框本身。隐藏单元格内容时，预期的结果是完整的表格结构。

【问题讨论】：

标签： javascript html css html-table cell

【解决方案1】：

像这样吗？
带有class="hidden" 的单元格将显示为空，但您可以将background: #fff; 更改为您想要的任何其他颜色

td.hidden {
  position: relative;
}

td.hidden:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 10;
}

<table border=1>
  <tr>
    <td class="hidden">asd</td>
    <td>zxc</td>
    <td>test</td>
  </tr>
  <tr>
    <td>asd</td>
    <td class="hidden">zxc</td>
    <td>test</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>zxc</td>
    <td class="hidden">test</td>
  </tr>
</table>

【讨论】：