IE7让我的生活变得悲惨!使用css切换在html表列(w/colspan)之间获得差距

Question

IE7让我的生活变得悲惨!使用css切换在html表列(w/colspan)之间获得差距

Art*_*son 6 html javascript css html-table internet-explorer-7

复制/粘贴此html代码段并在IE7中试用.当您切换隐藏的列时,它会在列之间留下空隙.在Firefox中它工作正常,列最小化时触摸.还没有尝试IE8,很想知道它是如何工作的.有任何想法吗？我在CSS中尝试了很多东西,比如table-layout:修复但没有运气.

注意:不寻找不同的切换方法,因为我正在处理的表是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jdi*_*tal 2

这是一个使用 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，1 月前
查看次数：	1258 次
最近记录：	9 年，8 月前