?
Solved

IE problem. Gap between rows for hidden cells

Posted on 2006-11-14
8
Medium Priority
?
565 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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 …
Suggested Courses
Course of the Month8 days, 4 hours left to enroll

765 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