Solved

IE problem. Gap between rows for hidden cells

Posted on 2006-11-14
8
558 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:aks143
8 Comments
 
LVL 33

Expert Comment

by:hongjun
ID: 17938069
Add this

.tr-hidden {
     display: none;
}
0
 

Author Comment

by:aks143
ID: 17938241
Thanks.

I know it. But i already said, i don't want to add any style class for row.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17946458
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
 

Author Comment

by:aks143
ID: 17955745
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17955788
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
 

Author Comment

by:aks143
ID: 17971098
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
 
LVL 1

Expert Comment

by:kodiakbear
ID: 17992237
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
 

Accepted Solution

by:
PashaMod earned 0 total points
ID: 18014071
Closed, 100 points refunded.
PashaMod
Community Support Moderator
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Creating a slider 12 44
Re-position sub-options beneath the TAB 7 75
How can I make a css class read only with jquery? 2 37
Footer at the bottom of the page not centered 5 29
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now