Style attribute disturbs td in table when using display block

Trying to hide and show a table by JavaScript. Something is disturbing td in table when using style="display: block;" on table. (Using FF)
The with of the td loses the reference to the tables 100% and reference to its own content. But using display="block" works fine. The solution is to use a div with style="display: block;" around the table.

<table cellspacing="0" cellpadding="0" border="1" width="100%" display="block">
  <tbody>
    <tr>
      <td>Working</td>
    </tr>
  </tbody>
</table>

<table cellspacing="0" cellpadding="0" border="1" width="100%" style="display: block;">
<tbody>
    <tr>
      <td>Not working</td>
    </tr>
</tbody>
</table>


<div style="display: block;">
  <table cellspacing="0" cellpadding="0" border="1" width="100%">
    <tbody>
      <tr>
        <td>Working</td>
      </tr>
    </tbody>
  </table>
</div>
Knowledge keywords: