Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

toggle table rows IE hides border

Posted on 2010-08-31
18
Medium Priority
?
410 Views
Last Modified: 2012-05-10
Hi Experts,

I made this simple Jquery to toggle table rows with a button:

	$("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

Open in new window


My HTML looks something like this:

<table>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>

Open in new window


The code works like a charm, except that when the table is collapsed the last row of the table doesn't show a bottom border in Internet Explorer. No problems in Chrome or Firefox...

Any suggestions?
0
Comment
Question by:Dennie
[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
  • 10
  • 8
18 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33564836
What happens if you add tbody and what does the CSS look like for the table, rows and cells?
0
 

Author Comment

by:Dennie
ID: 33564892
No difference with the tbody tag. By the way I just found out it is only an IE7 problem.

Here's the relevant CSS:
[code]
table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border-bottom:1px solid #CCCCCC;
      border-right:1px solid #CCCCCC;
      color:#4F6B72;
}
[/code]
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33564962
EE has a CODE field

Where is the HIDDEN class?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Dennie
ID: 33564982
I have no specific CSS for the hidden class. Only some jquery to hide the hidden rows at document load.
The table.reuters-table td CSS also applies for the hidden class


$(document).ready(function(){
	$("tr.hidden").hide(); 
});

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33565023
Thanks.

I do not see anything that should make this happen. I will look for some IE7 specific behaviour such as unhappiness with having borders on the table AND the TD
0
 

Author Comment

by:Dennie
ID: 33565608
damn I still can't find it. Any ideas?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574638
Sorry - I do not even have IE7 to see it happen
0
 

Author Comment

by:Dennie
ID: 33574666
IE8 compatibility mode...?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574677
Ah - I forgot my code at home
Do you have a stand-alone version of the issue somewhere?
0
 

Author Comment

by:Dennie
ID: 33574759
No, the code & CSS in the first posts should be sufficient
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574974
Yes, it is, but now I have to put it back together again to test it

<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title></title>
<style type="text/css">

table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border-bottom:1px solid #CCCCCC;
      border-right:1px solid #CCCCCC;
      color:#4F6B72;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("tr.hidden").hide(); 

  $("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

});

</script>  
  </head>
  <body>
<table class="reuters-table">
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>
  </body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575024
Nope. I cannot see the issue in the code I posted
0
 

Author Comment

by:Dennie
ID: 33575073
PLease try this code
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title></title>
<style type="text/css">
table {border-collapse: collapse;}
table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border:1px solid #CCCCCC;
      color:#4F6B72;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("tr.hidden").hide(); 

  $("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

});

</script>  
  </head>
  <body>
<table class="reuters-table">
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>
  </body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575150
If you remove that
table {border-collapse: collapse;}
it works

0
 

Author Comment

by:Dennie
ID: 33575177
But I need the border-collapse...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575186
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1500 total points
ID: 33575710
Above thread not interesting for this issue.

Can you try

<!--[if !IE 7]>
table {border-collapse: collapse;}
<![endif]-->


0
 

Author Closing Comment

by:Dennie
ID: 33797152
Not what I was looking for. But some points for your help. Thanks!
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 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