Art Peterson Art Peterson - 1 month ago 5
CSS Question

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

Copy/paste this html code snippet and try it out in IE7. When you toggle the hidden columns it leaves a gap between the columns. In Firefox it works fine, the columns touch when minimized. Haven't tried IE8 yet, would be curious to hear how it works there. Any ideas? I've tried a bunch of things in the CSS like table-layout:fixed but no luck.

Note: Not looking for a different toggling method because the table I'm really dealing with is 50+ columns wide and 4000+ rows so looping/jquery techniques are too slow.

Here's the code - if someone can re-post a working version of it I'll instantly give them the check and be forever in your debt!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function toggle() {
var tableobj = document.getElementById("mytable");
if (tableobj.className == "") {
tableobj.className = "hide1 hide2";
}
else {
tableobj.className = "";
}
}
</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>

Answer

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