复制/粘贴此 html 代码片段并在 IE7 中试用。当您切换隐藏的列时，它会在列之间留下间隙。在 Firefox 中它工作正常，列在最小化时接触。还没有尝试过 IE8，很想知道它在那里是如何工作的。有任何想法吗？我在 CSS 中尝试了很多东西，比如 table-layout:fixed 但没有成功。
注意:没有寻找不同的切换方法，因为我真正处理的表有 50 多列宽和 4000 多行，所以循环/jquery 技术太慢了。
这是代码 - 如果有人可以重新发布它的工作版本，我会立即给他们支票并永远欠你的债!
<!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>
最佳答案
这是一个使用 JQuery 来切换列标题的解决方案(请参阅我的其他答案了解基本原理)。除了 JQuery 之外，html 页面的其余部分是相同的。
<!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>
关于javascript - IE7 让我的生活变得悲惨!使用 css toggle 在 html 表列(w/colspan)之间获取间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2870565/