IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed_问答_开发者

IE8 isn't resizing tbody or thead when a column is hidden in a table with table-layout:fixed

开发者 https://www.devze.com 2022-12-27 08:07 出处：网络

IE 8 is doing something very strange when I hide a column in a table with table-layout:fixed. The column is hidden, the table element stays the same width, but the tbody and thead elements are not resized to fill the remaining width. It works in IE7 mode (and FF, Chrome, etc. of course). Has anyone seen this before or know of a workaround?

Here is my test page - toggle the first column and use the dev console to check out the table, tbody and thead width:

<!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.getElem开发者_开发百科entById('toggle').onclick = function(){ toggleFirstColumn(); return false; };
    </script>
  </body>
</html>

A simple work-around for IE8 consists in giving the table a nudge, to get IE8 to adjust the column width based on the remaining columns. Assuming table points the to the table, the following will do the trick:

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

Credits: I read about this technique first from Srikanth's blog. And for reference, here is the updated example using this technique.

^{I should note however that this technique doesn't always work. I am seeing a case in a more complicated app where no style change I could do seem to convince IE take into account that the number of columns changed (sorry, I don't have a simpler reproducable case). Luckily for us, IE9 entirely solves this problem.}

Just found a nasty hack - Pick a visible column that should fill up the empty space and give it the class "colspanfix". Call this function after the other column is toggled (using jquery for brevity):

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

It checks to see if the table element is wider than the tbody element then it assigns a colspan value to the elements with the "colspanfix" class. The kicker is that it has to increase the colspan by one for each hide/show. Not very pretty, but it works.