设置display:none后HTML表格仍显示边框的解决方法咨询

问题根源 #

你隐藏的是<td>内部的<div>元素，但<td>本身依然存在，table的边框样式直接作用在<td>上，所以即使div消失，td的边框还是会显示。另外你的HTML代码里存在未闭合的<div>标签，这也可能导致样式异常，建议先补全。

最佳解决办法（无需/按需使用JS） #

1. 直接隐藏整个单元格或行（最彻底）

如果不需要保留该td的位置，直接给对应的<td>或<tr>添加display:none，整个单元格/行会被隐藏，边框自然消失：

<!-- 隐藏整行 -->
<tr style="display:none;">
  <td>
    <div id="true-number">
      <label for="true_value">Select number for AF count:</label>
      <a target="_blank" title="Provide number for AF count">
        <img src="https://shots.jotform.com/kade/Screenshots/blue_question_mark.png" height="13px" />
      </a>
    </div>
  </td>
</tr>

如果需要动态控制（比如根据下拉选择显示/隐藏），可以用JS操作行的显示状态：

function showHide(value) {
  const targetRow = document.querySelector('#true-number').closest('tr');
  targetRow.style.display = value === 'Number' ? 'table-row' : 'none';
}

2. 移除目标TD的边框样式

如果需要保留td的位置但去掉边框，可以给该td添加无边框样式：

<td style="border: none;">
  <div id="true-number" style="display:none;">...</div>
</td>

也可以用CSS类统一管理，方便复用：

.no-border {
  border: none !important;
}

<td class="no-border">...</td>

3. 修复HTML结构错误

你的代码中<div id="true-number">没有闭合，这会导致DOM结构异常，可能引发其他样式问题，务必补全闭合标签：

<td>
  <div id="true-number" style="display:none;">
    <label for="true_value">Select number for AF count:</label>
    <a target="_blank" title="Provide number for AF count">
      <img src="https://shots.jotform.com/kade/Screenshots/blue_question_mark.png" height="13px" />
    </a>
  </div> <!-- 补全闭合标签 -->
</td>

是否需要JavaScript？ #

• 静态隐藏：不需要JS，直接通过CSS/HTML属性设置即可。
• 动态显示/隐藏（比如根据下拉选择切换）：需要JS配合，但核心是操作<tr>或<td>的显示状态，而非仅操作内部的div。

内容的提问来源于stack exchange，提问作者Bilvika Kasturi