我正在用纯 JavaScript 创建一个表格，并使用 onClick 监听器事件以两种方式填充它 - 单击外部按钮或单击其中一个单元格本身；并且在这两种方式中，调用一个函数来为一些单元格随机分配值。我无法使用任何可用的方法隐藏我的表格单元格的内容 - 显示:无，和可见性:隐藏。但是我仍然可以使用 fontSize = 0 来做到这一点，另一个问题出现了，即单元格边框丢失了。因此，我的问题是我想隐藏我的表格单元格内容，同时在其中呈现值而不影响表格结构。
我已经尝试过可用的常规方法，即
1) td {display: none;}, and 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> </td>
... .... ...
<td> </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>
所有可用的技术都会使表格本身空白，即消除单元格边框本身。隐藏单元格内容时的预期结果是完整的表结构。
最佳答案
是这样的吗？
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>关于javascript - 使用普通 javascript 动态隐藏表格单元格内容时，如何保护单元格边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57656219/