Скрыть определенные ячейки в таблице (HTML + CSS)

Question

Косяк после нескольких изображений здесь, поэтому ссылку на одну картину http://i.stack.imgur.com/Pu333.png

Я получил следующую таблицу: рисунок 1 из указанной выше ссылке

Мне нужно, чтобы это было отображается как это: фигура 2 из указанных выше ссылки

проблемы состоит в том, что ХХАЯ ячейка должна быть в отдельной строке, таким образом, если я скрыть строки 30 или строки 20 остается на экране: цифра 3 из указанных выше ссылки

разметки доступной here

<table border="0" cellpadding="0" cellspacing="0"> 
<thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th width="100px">4</th> 
     <th width="100px">5</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>aa</td> 
     <td rowspan="4">bb</td> 
     <td>cc</td> 
     <td>dd</td> 
     <td>ee</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td style="display:none"></td> 
     <td rowspan="3">XXXX</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>30</td> 
     <td style="display:none">32</td> 
     <td style="display:none">33</td> 
     <td>34</td> 
     <td>35</td> 
    </tr> 
    <tr> 
     <td>20</td> 
     <td style="display:none">22</td> 
     <td style="display:none">23</td> 
     <td>24</td> 
     <td>25</td> 
    </tr> 
</tbody> 

Answer 1

<table border="0" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th width="100px">4</th> 
      <th width="100px">5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>aa</td> 
      <td rowspan="3">bb</td> 
      <td>cc</td> 
      <td>dd</td> 
      <td>ee</td> 
     </tr> 
     <tr> 
      <td>30</td> 
      <td style="display:none">32</td> 
      <td rowspan="2">XXXX</td> 
      <td>34</td> 
      <td>35</td> 
     </tr> 
     <tr> 
      <td>20</td> 
      <td style="display:none">22</td> 
      <td style="display:none">23</td> 
      <td>24</td> 
      <td>25</td> 
     </tr> 
    </tbody> 
</table>