IE8 не изменяет размер tbody или thead, когда столбец скрыт в таблице с table-layout: исправлено

IE 8 делает что-то очень странное, когда я скрываю столбец в таблице с помощью table-layout: fixed. Столбец скрыт, элемент таблицы остается той же ширины, но размеры элементов tbody и thead не изменяются, чтобы заполнить оставшуюся ширину. Он работает в режиме IE7 (и, конечно, FF, Chrome и т. Д.). Кто-нибудь видел это раньше или знает обходной путь?

Вот моя тестовая страница - переключите первый столбец и используйте консоль разработчика, чтобы проверить таблицу, tbody и ширину экрана:

<!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 toggle html-table internet-explorer-8
person tterrace    schedule 16.04.2010    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Простой обходной путь для IE8 состоит в том, чтобы подтолкнуть таблицу, чтобы IE8 настроил ширину столбца на основе оставшихся столбцов. Предполагая, что table указывает на таблицу, следующее поможет:

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

Источники: я впервые прочитал об этой технике в блоге Srikanth . И для справки, вот обновленный пример используя эту технику.

Следует отметить, однако, что этот метод не всегда работает. Я вижу случай в более сложном приложении, где никакое изменение стиля, которое я мог бы убедить IE принять во внимание, изменилось количество столбцов (извините, у меня нет более простого воспроизводимого случая). К счастью для нас, IE9 полностью решает эту проблему.

person avernet    schedule 21.05.2011
comment
Я только что это проверил - спасибо! Это намного лучше, чем опубликованный мною хак. - person tterrace; 18.06.2011
comment
У меня это не сработало. Мне пришлось сначала скрыть таблицу в settimeout, а затем снова показать ее во вложенном settimeout. - person Urbycoz; 16.04.2013

arrow_upward
0
arrow_downward

Только что нашел неприятный прием - выберите видимый столбец, который должен заполнить пустое пространство, и присвойте ему класс colspanfix. Вызовите эту функцию после переключения другого столбца (для краткости используйте jquery):

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

Он проверяет, шире ли элемент таблицы, чем элемент tbody, затем присваивает значение colspan элементам с классом «colspanfix». Кикер в том, что он должен увеличивать colspan на единицу для каждого скрытия / показа. Не очень красиво, но работает.

person tterrace    schedule 16.04.2010
comment
Одним из недостатков этого метода является то, что он увеличивает ширину столбца, в котором у вас есть colspanfix, но не увеличивает ширину других столбцов. Т.е. после этого у вас больше не будет ситуации, когда все столбцы имеют одинаковую ширину (что может или не может быть хорошо в зависимости от вашего варианта использования). - person avernet; 26.05.2011