Solved

IE problem. Gap between rows for hidden cells

Posted on 2006-11-14
8
559 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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

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
 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Menu Selected on Chrome for Windows 13 18
change button location when you go on your cellular device 21 29
Botom of page is wrong color 5 11
Can't get container centered 4 13
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

773 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