asked on

toggle table rows IE hides border

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?

Michel Plungjan

What happens if you add tbody and what does the CSS look like for the table, rows and cells?

Dennie

ASKER

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]

Michel Plungjan

EE has a CODE field

Where is the HIDDEN class?

Dennie

ASKER

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

Michel Plungjan

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

Dennie

ASKER

damn I still can't find it. Any ideas?

Michel Plungjan

Sorry - I do not even have IE7 to see it happen

Dennie

ASKER

IE8 compatibility mode...?

Michel Plungjan

Ah - I forgot my code at home
Do you have a stand-alone version of the issue somewhere?

Dennie

ASKER

No, the code & CSS in the first posts should be sufficient

Michel Plungjan

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

Michel Plungjan

Nope. I cannot see the issue in the code I posted

Dennie

ASKER

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

Michel Plungjan

If you remove that
table {border-collapse: collapse;}
it works

Dennie

ASKER

But I need the border-collapse...

Michel Plungjan

Here is a thread that I did not have time to read

http://bytes.com/topic/html-css/answers/154220-seeking-explanation-strange-border-collapse-behavior

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.