当列隐藏在具有 table-layout:fixed 的表中时，IE8 不会调整 tbody 或 thead 的大小答案

【问题标题】：IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed当列隐藏在具有 table-layout:fixed 的表中时，IE8 不会调整 tbody 或 thead 的大小
【发布时间】：2011-02-08 21:25:33
【问题描述】：

当我使用 table-layout:fixed 隐藏表格中的列时，IE 8 正在做一些非常奇怪的事情。该列被隐藏，table 元素保持相同的宽度，但 tbody 和 thead 元素不会调整大小以填充剩余宽度。它在 IE7 模式下工作（当然还有 FF、Chrome 等）。有没有人见过这个或知道解决方法？

这是我的测试页面 - 切换第一列并使用开发控制台检查表格、tbody 和thead 宽度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>bug</title>
    <style type="text/css">
      table {
        table-layout:fixed; 
        width:100%;
        border-collapse:collapse;
      }
      td, th {
        border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="target1">1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="target2">1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <a href="#" id="toggle">toggle first column</a>
    <script type="text/javascript">
      function toggleFirstColumn() {
        if (document.getElementById('target1').style.display=='' ||
            document.getElementById('target1').style.display=='table-cell') {
          document.getElementById('target1').style.display='none';
          document.getElementById('target2').style.display='none';
        } else {
          document.getElementById('target1').style.display='table-cell';
          document.getElementById('target2').style.display='table-cell';
        }
      }
      document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; };
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript internet-explorer-8 html-table toggle

【解决方案1】：

IE8 的一个简单解决方法是轻推表格，让 IE8 根据剩余的列调整列宽。假设table 指向桌子，下面的就可以了：

table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);

致谢：我首先从Srikanth's blog 了解到这项技术。作为参考，这里是使用这种技术的updated example。

^{但我应该注意，这种技术并不总是有效。我在一个更复杂的应用程序中看到一个案例，我无法更改样式似乎说服 IE 考虑到列数已更改（抱歉，我没有更简单的可重现案例）。幸运的是，IE9 完全解决了这个问题。}

【讨论】：

我刚刚验证了这一点 - 谢谢！这比我发布的黑客要好得多。
这对我不起作用。我必须先在 settimeout 中隐藏表格，然后在嵌套的 settimeout 中再次显示。

【解决方案2】：

刚刚发现了一个令人讨厌的 hack - 选择一个应该填满空白空间的可见列，并将其命名为“colspanfix”类。在切换另一列后调用此函数（为简洁起见，使用 jquery）：

function fixColspans(tableId) {
  if ($('#' + tableId).width() > $('#' + tableId + ' tbody').width()) {
    var current = $('#' + tableId + ' .colspanfix').attr('colspan');
    $('#' + tableId + ' .colspanfix').attr('colspan', ++current);
  }
}

它检查 table 元素是否比 tbody 元素宽，然后将 colspan 值分配给具有“colspanfix”类的元素。更重要的是，它必须为每个隐藏/显示增加一个 colspan。不是很漂亮，但很管用。

【讨论】：

这种技术的一个缺点是它会增加您拥有colspanfix 的列的宽度，而不会增加其他列的宽度。 IE。在此之后，您不会再遇到所有列都具有相同宽度的情况（根据您的用例，这可能会也可能不会很好）。