IE problem. Gap between rows for hidden cells

Hi All,

I have the scenario where some rows are required to be hidden. I am doing it by setting the style with display:none for the cells. Doing this, IE shows a gap between the rows and it works fine in firefox. I do not want to set any style for <tr>. Is it still possible to acheive it somehow to work for IE?? Following is the example code

<html>
<head>
<title>Test Page</title>
<style>
.td-hidden {
      display: none;
}

TABLE { border-collapse:collapse;}
TD { border:2px blue solid; }

</style>
</head>
<body>
                  <table width='180'>
                        <colgroup>
                              <col width='45'>
                              <col width='45'>
                              <col width='45'>
                              <col width='45'>
                        <tr id='tr0'>
                              <td align='right' class='td'>
                                    XX
                              </td>
                              <td align='left' class='td'>
                                    YY
                              </td>
                              <td align='left' class='td'>
                                    ZZ
                              </td>
                              <td align='left' class='td'>
                                    OO
                              </td>
                        </tr>
                        <tr id='tr1' class='tr-hidden'>
                              <td align='right' class='td-hidden'>
                                    YY
                              </td>
                              <td align='left' class='td-hidden'>
                                    VV
                              </td>
                              <td align='left' class='td-hidden'>
                                    EE
                              </td>
                              <td align='left' class='td-hidden'>
                                    UU
                              </td>
                        </tr>
                        <tr id='tr2' class='tr-hidden'>
                              <td align='right' class='td-hidden'>
                                    PP
                              </td>
                              <td align='left' class='td-hidden'>
                                    TT
                              </td>
                              <td align='left' class='td-hidden'>
                                    JJ
                              </td>
                              <td align='left' class='td-hidden'>
                                    LL
                              </td>
                        </tr>
                        <tr id='tr3' class='tr-hidden'>
                              <td align='right' class='td-hidden'>
                                    FF
                              </td>
                              <td align='left' class='td-hidden'>
                                    PL
                              </td>
                              <td align='left' class='td-hidden'>
                                    NN
                              </td>
                              <td align='left' class='td-hidden'>
                                    LL
                              </td>
                        </tr>
                        <tr id='tr4' class='tr-hidden'>
                              <td align='right' class='td-hidden'>
                                    DD
                              </td>
                              <td align='left' class='td-hidden'>
                                    PP
                              </td>
                              <td align='left' class='td-hidden'>
                                    OO
                              </td>
                              <td align='left' class='td-hidden'>
                                    NN
                              </td>
                        </tr>
                        <tr id='tr6'>
                              <td align='right' class='td'>
                                    VV
                              </td>
                              <td align='left' class='td'>
                                    JJ
                              </td>
                              <td align='left' class='td'>
                                    OO
                              </td>
                              <td align='left' class='td'>
                                    RR
                              </td>
                        </tr>
                  </table>
</body>
</html>

Regards,
aks
aks143Asked:
Who is Participating?
 
PashaModCommented:
Closed, 100 points refunded.
PashaMod
Community Support Moderator
0
 
hongjunCommented:
Add this

.tr-hidden {
     display: none;
}
0
 
aks143Author Commented:
Thanks.

I know it. But i already said, i don't want to add any style class for row.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
VoteyDiscipleCommented:
It might help to know why you don't want to set a style for <tr> itself, as that's by far the easiest and most direct solution.  If that's not an option, I'm guessing other things aren't either?  What about <tr> styles is unacceptable?
0
 
aks143Author Commented:
the reason of not able to set the style for TR is: I am using a framework which generates the HTML Table. This framework doesn't have any possibility to define style on the row. So, here sucks! Changing the framework needs lot of time.  So, i need a indirect solution.
0
 
VoteyDiscipleCommented:
Ah, so the code you posted earlier (that had class="tr-hidden" on the row) was not the actual code generated?  That's confusing... What IS the actual code?

If we're into kludgy solutions, how 'bout something like setting margin-bottom: -1em; on each hidden cell?  I haven't actually tried that, so I don't know its real behavior, but it sounds like it has potential...
0
 
aks143Author Commented:
sorry for keeping the class in tr. That was my test code to check it's behaviour. Anyway, i did another workaround and it looks fine now. I change/assign the css classnames with javascript on page load. Using DOM. It works fine now. Thanks. Aks.
0
 
kodiakbearCommented:
A request has been made in CS to PAQ this question. I or another moderator will finalize this question in 4 days if there are no objections from the participating experts.
Since the asker posted the solution it will be  PAQ/Refund of points

Thank you.
kb
Experts Exchange Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.