IE7 is making my life miserable! Getting gaps between html table columns (w/ colspan) with css togg
Posted
by Art Peterson
on Stack Overflow
See other posts from Stack Overflow
or by Art Peterson
Published on 2010-05-20T01:54:08Z
Indexed on
2010/05/20
2:00 UTC
Read the original article
Hit count: 300
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>
© Stack Overflow or respective owner
