text not hidden within table

Question

I am quite confused by the following html markup

<table id="tableCharts" hidden=true>
  <tr>
    <table id="tableResetLinks">
      <tr>
        <td>
          <a href="test"><b>Reset All</b></a>
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    <td id="chart-pie-pnlperstrategy">
      <div class="chart-title">PnL by Strategy</div>
    </td>
  </tr>
</table>

I would expect the hidden=true style element to apply to the whole tableCharts table but it doesn't as the text PnL by Strategyshows up no matter what the hidden parameter is set to.

hidden=true does work for the tableResetLinks table though.

The code above is a simplification of my actual code. I do need the child table in there.

Must be something obvious I'm missing.

Answer 1

Since you need the child table, what can you do is use a wrapper (like a <div>) to wrap the whole table, and put the hidden there

<div hidden>
<table id="tableCharts">
  <tr>
    <table id="tableResetLinks">
      <tr>
        <td>
          <a href="test"><b>Reset All</b></a>
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    <td id="chart-pie-pnlperstrategy">
      <div class="chart-title">PnL by Strategy</div>
    </td>
  </tr>
</table>
</div>