Table is realigned after setting the display property to 'block'

Question

I'm having a table and i have a row which is initially set to the display property of 'none'

and i changing it to 'block' at some selection of value from my select box , at that point of time the row is not aligned properly. My two columns are set inside a single column of the above row?

but when i change it again to 'none' all the other rows are aligned correctly..

Answer 1

Instead of changing it to display:block; use display:table-row;.

Example here.

Code:

<table width="200" border="1">

  <tr style="display:table-row;">
    <td><span class="A">8:00 AM</span></td>
    <td><span class="B">Monday</span></td>
    <td><span class="C">Sept</span></td>
  </tr>

</table>​