Solved

IE problem. Gap between rows for hidden cells

Posted on 2006-11-14
8
557 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 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

23 Experts available now in Live!

Get 1:1 Help Now