ansaurus

Question

IE7 is making my life miserable! Getting gaps between html table columns (w/ colspan) with css toggle

Answer 1

A:

Try this doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

edl 2010-05-20 02:18:28

How would that make difference? His doctype is entirely fine. Why switching from HTML to XHTML?

BalusC 2010-05-20 02:26:05

Sorry. edited. If you have an incorrectly declared doctype, IE goes into quirks mode i believe.

edl 2010-05-20 02:37:30

Thanks for catching that, I left out the "!" in the doctype. Added it in but it made no difference.

Art Peterson 2010-05-20 03:29:44

Sorry that didn't fix your problem. It fixes it on IE8 and I don't have IE7 to try it on. Good luck!

edl 2010-05-20 03:33:16

Answer 2

+1 A:

Don't yet have an explanation of why IE is doing this, but here's what's happening and here's how to work around it.

1) If you set the table class to 'hide1 hide2' in the html, then the table will render properly (no gap). Therefore, the problem seems to be related to the way that IE handles changes to a table via styles.

2) The gap between the columns is the width of the spanned column header.

3) If you eliminate column spanning (and the extra columns), then everything works fine.

I've found two workarounds. The first is to use code to toggle the display, but you've rejected that option.

The alternative is to eliminate the colspans. There are a variety of ways to do that. One is to convert the group of cells to be spanned into an embedded table (that is, instead of two TD elements, you'll have one TD which contains a TABLE with one TR and two TDs). Or you can use SPANs for cleaner code (with, say, a BORDER-RIGHT for all cells but the last).

jdigital 2010-05-20 03:27:08

Elimination of the colspans is not a good workaround because the widths of the SPANs or the TDs in the embedded TABLE will vary depending on the value in the cell - so the border will not line up down the page like a table.What do you mean by using code to toggle the display - I rejected one particular implementation because it was significantly slower but perhaps there is a way that will give similar results to this method?

Art Peterson 2010-05-20 03:38:26

Thanks for the attempt - that only works for one row. Like I already mentioned try to add a few more TR data rows with varying length values in the TDs and see how the border line does not line up down the page.

Art Peterson 2010-05-20 03:43:23

To do this in code, keep what you already have, and then augment the toggle function to loop thru all the TH elements that want to hide and explicitly set their style.display to 'none' (or to an empty string when you want to make the columns visible again). The good news is that you only need to do the TH cells, not the TDs, so this might be efficient enought.

jdigital 2010-05-20 03:43:53

BTW, with jquery, you can use $('th.col1').hide() to hide all TH cells with class col1 and you can use the show() method to show them (no need for you to search or loop when you can have jquery do it for you).

jdigital 2010-05-20 03:54:56

I just tried using jquery to hide the TH cells with class col1 but it simply hid the TH cells but left the TD cells displayed.

Art Peterson 2010-05-20 04:39:35

You need to keep the rest of your code in place (i.e., you should still toggle the styles using classname = 'hide1 hide2'). I have posted the code as another answer.

jdigital 2010-05-20 04:45:18

Answer 3

+1 A:

Here's a solution that uses JQuery to toggle the column headers (see my other answer for the rationale). Apart from the JQuery stuff, the rest of the html page is the same.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"  type="text/javascript"></script>    

<script>
function toggle() {
   var tableobj = document.getElementById("mytable");
   if (tableobj.className == "") {
      tableobj.className = "hide1 hide2";
      $('th[class^=col]').hide();
   }
   else {
      tableobj.className = "";
      $('th[class^=col]').show();
   }
}
</script>
<style>
   table { border-collapse: collapse; }
   td, th { border: 1px solid silver; }
   .hide1 .col1 { display: none; }
   .hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
   <th>A</th>
   <th colspan="2">B</th>
   <th colspan="2" class="col1">B1</th>
   <th colspan="2">C</th>
   <th colspan="2" class="col2">C1</th>
</tr>
<tr>
   <td>123</td>
   <td>456</td>
   <td>789</td>
   <td class="col1">123</td>
   <td class="col1">456</td>
   <td>789</td>
   <td>123</td>
   <td class="col2">456</td>
   <td class="col2">789</td>
</tr>
</table>
</body>
</html>

jdigital 2010-05-20 04:47:34

Wow - this looks very promising! Testing it out will get back to you.

Art Peterson 2010-05-20 05:46:39

This definitely fixes the issue, and since it only has to loop through the THs there is no slow-down. You are awesome, thank you thank you thank you!

Art Peterson 2010-05-20 14:23:22

Glad that this worked out for you. I've come to the conclusion that this is a bug in IE7. If there are any performance issues, even a slight lag on a slow machine, you might want to conditionalize the jquery calls so that they're used only if needed.

jdigital 2010-05-20 15:57:40

ansaurus

tags:

views:

answers:

IE7 is making my life miserable! Getting gaps between html table columns (w/ colspan) with css toggle

related questions