关于HTML中tableCharts的hidden属性未隐藏内部文本的技术咨询

首先，你的问题根源主要有两个：HTML结构嵌套错误和浏览器对错误结构的自动修正，导致hidden属性没有作用到你预期的所有内容上。

具体原因分析 #

• 无效的HTML嵌套
  HTML规范里，<tr>元素的直接子元素只能是<td>或<th>，你在<tr>里直接嵌套了另一个<table id="tableResetLinks">，这是不符合语法规则的。浏览器遇到错误的HTML结构时，会自动进行修正——它会把这个错误嵌套的<table>从<tableCharts>的<tr>中“剥离”出来，变成和<tableCharts>同级的元素。这样一来，<tableResetLinks>就不在tableCharts的范围内了，自然不会被hidden属性隐藏。

• hidden属性的写法（次要）
  HTML的布尔属性（比如hidden）标准写法是不需要赋值的，只需要写hidden即可。虽然hidden=true大部分浏览器也能识别，但严格来说不符合规范，建议改为标准写法。

解决办法 #

修正你的HTML结构，确保所有元素都正确嵌套：

<table id="tableCharts" hidden>
  <tr>
    <!-- 把内部table放在td里，符合嵌套规范 -->
    <td>
      <table id="tableResetLinks">
        <tr>
          <td>
            <a href="test"><b>Reset All</b></a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td id="chart-pie-pnlperstrategy">
      <div class="chart-title">PnL by Strategy</div>
    </td>
  </tr>
</table>

这样修改后：

• 所有内部元素都正确嵌套在tableCharts的结构中，hidden属性会作用于整个表格及其所有子元素。
• 遵循了HTML规范，浏览器不会再自动修正结构，你的预期效果就能实现了。

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